# Alert

> An inline status message rendered as a bordered, tinted panel, colored by one of five semantic tones and announced to assistive technology through `role="alert"` plus a configurable `aria-live` politeness.

```ts
import { Alert } from "@sdxc/ui";
```

Renders an inline status panel tinted by Alert.Props.color, gaining
inline-start padding through `:has()` when a direct Alert.Icon
needs the room. `role`, `aria-atomic`, and `aria-live` stay overridable.

## Examples

```tsx
<Alert color="danger">
  <Alert.Icon><CircleAlertIcon /></Alert.Icon>
  <Alert.Content>
    <Alert.Title>{t("alerts.paymentFailed.title")}</Alert.Title>
    <Alert.Description>{t("alerts.paymentFailed.description")}</Alert.Description>
  </Alert.Content>
  <Alert.Action>
    <Button size="sm">{t("alerts.paymentFailed.retry")}</Button>
  </Alert.Action>
</Alert>
```

```tsx
<Alert color="success" live="assertive">
  <Alert.Content>
    <Alert.Title>{t("alerts.saved.title")}</Alert.Title>
  </Alert.Content>
</Alert>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic tone of the alert. Default: `"neutral"`. |
| `live?` | `"polite" \| "assertive" \| "off"` | `aria-live` politeness for dynamic alerts. Default: `"polite"`. |
| `children` | `RemixNode` | The alert's compound parts: Alert.Icon, Alert.Content, Alert.Action, or any other content. |

Also accepts everything in `TagProps<"div">`.


### Alert.Icon

Renders Alert.IconProps.children as the alert's leading icon, absolutely positioned at the panel's inline/block-start corner with any direct SVG sized to `1rem`.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The icon graphic, typically a single SVG icon. |

Also accepts everything in `TagProps<"div">`.


### Alert.Content

Renders Alert.ContentProps.children as the alert's body block: a column flex container that shrinks to fit alongside a leading icon or trailing action, holding Alert.Title and Alert.Description.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The alert's title, description, or other body content. |

Also accepts everything in `TagProps<"div">`.


### Alert.Title

Renders Alert.TitleProps.children as the alert's heading, inside the native heading element matching the nearest ancestor `HeadingScope`'s depth — or `<h1>` where no scope wraps it — styled as a small, tight label.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The alert's heading text. |

Also accepts everything in `TagProps<"h1">`.


### Alert.Description

Renders Alert.DescriptionProps.children as the alert's supporting message, slightly translucent against the alert's foreground color so it reads as secondary to the title.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The alert's supporting message text. |

Also accepts everything in `TagProps<"p">`.


### Alert.Action

Renders Alert.ActionProps.children as the alert's trailing control — a button, link, or dismiss affordance — pinned to the panel's block-start edge at its own natural size.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | A button, link, or other control the alert offers, e.g. "Retry" or "Dismiss". |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic tone driving the host element's border, tint, and foreground color through the `--ui-*` variables for that color. |
| `Live` | `"polite" \| "assertive" \| "off"` | `aria-live` politeness applied to the host element. |