# Alert

A callout that draws attention to a message, with an icon, a title and an action.

```ehtml Example
import { Alert, AlertTitle, AlertDescription, AlertAction } from "@elements/ui/alert";
import { Icon } from "@elements/ui/icon";
import { Button } from "@elements/ui/button";

<Alert variant="success" title="Payment successful" description="Your receipt is on its way.">
  <Icon name="check-circle" />
</Alert>

<Alert variant="danger">
  <Icon name="alert-circle" />
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>Your card was declined.</AlertDescription>
  <AlertAction><Button size="sm">Retry</Button></AlertAction>
</Alert>
```

## Parts

| Part | What it is |
|---|---|
| `AlertTitle` | .alert-title: the strong first line. |
| `AlertDescription` | .alert-description: the body, paragraphs and lists spaced. |
| `AlertAction` | .alert-action: a control at the top inline end, in its own column. |
| `icon` | Any direct `<svg>` child, such as `<Icon name="info" />`. |

## Attributes

### Alert

| Attribute | Type | Default | Description |
|---|---|---|---|
| `variant` | `"neutral" \| "info" \| "success" \| "warning" \| "danger" \| "accent"` | `"neutral"` | neutral is a plain notice; the rest are the callout intents. |
| `title` | `string` | `""` | Renders an AlertTitle. |
| `description` | `string` | `""` | Renders an AlertDescription. |
| `role` | `"alert" \| "status" \| "none"` | `"alert"` | alert is announced at once, status politely, none not at all. |
| `class` | `string` | `""` | Extra classes; custom colors go here. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Other attributes: id, aria-\*, data-\*. |

### AlertTitle, AlertDescription, AlertAction

| Attribute | Type | Default | Description |
|---|---|---|---|
| `class` | `string` | `""` | Extra classes. |

## Slots

| Slot | Part | Content |
|---|---|---|
| `default` | `Alert` | An `<Icon>`, the parts, anything. Each finds its column by itself. |
| `default` | `each part` | The part's content. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-variant` | the variant | root |

## Accessibility

- role="alert" by default, announced at once. Use role="status" for a polite message and role="none" for a notice that is on the page from the start.
- An alert never moves focus. Controls inside it keep their own keyboard behavior.
- The icon is decorative; the title says what happened, so color is never the only signal.

## See also

- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Button](button): A button or a link that looks like one, in six variants and four sizes.
- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Kbd](kbd): A keyboard key or shortcut, as text.
- [Separator](separator): A horizontal or vertical rule between content, semantic or decorative.