---
title: Alert
description: "Displays a callout for user attention."
---

```tsx
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 shadcn@latest add @madeui/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

```tsx
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.

```tsx
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.