Alert

Displays a callout for user attention.

Heads up!

You can add components to your app using the CLI.

import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

export default function AlertDemo() {
  return (
    <Alert style={styles.alert}>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  );
}

const styles = stylex.create({
  alert: {
    width: container.xl,
  },
});

Install

Bash

npx @madeui/cli add alert

Usage

TSX

import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/components/ui/alert';

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>...</AlertDescription>
</Alert>

Composition

TSX

<Alert>
  <AlertTitle />
  <AlertDescription />
  <AlertAction />
</Alert>

Destructive

Error

Your session has expired. Log in again.

import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

export default function AlertDestructive() {
  return (
    <Alert variant="destructive" style={styles.alert}>
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>Your session has expired. Log in again.</AlertDescription>
    </Alert>
  );
}

const styles = stylex.create({
  alert: {
    width: container.xl,
  },
});

Action

AlertAction pins a slot (typically a button) to the top-right corner.

Changes saved

Your changes have been saved successfully.

import * as stylex from '@stylexjs/stylex';

import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { container } from '@/lib/constants.stylex';

export default function AlertActionDemo() {
  return (
    <Alert style={styles.alert}>
      <AlertTitle>Changes saved</AlertTitle>
      <AlertDescription>Your changes have been saved successfully.</AlertDescription>
      <AlertAction>
        <Button size="sm" variant="outline">
          Undo
        </Button>
      </AlertAction>
    </Alert>
  );
}

const styles = stylex.create({
  alert: {
    width: container.xl,
  },
});

API reference

Alert

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	Visual style.
`style`	`StyleXStyles`	—	StyleX styles merged last — always win over the component’s own styles.

Styling

AlertTitle, AlertDescription, AlertAction accept style (StyleXStyles, merged last so caller overrides always win) plus all native props of the element they render.