# Alert

Inline status message with tone variants.

## Examples

### Default

```tsx
import { Alert } from '@var-ui/react';

<Alert variant="info" title="Registry icons">
  Alerts pull their tone glyph from IconProvider automatically.
</Alert>
```

```astro
---
import { Alert } from '@var-ui/astro';
---

<Alert variant="info" title="Registry icons">
  Alerts pull their tone glyph from IconProvider automatically.
</Alert>
```

```html
<div data-tone="info" data-appearance="subtle" data-content-gap="spaced" class="var-ui-alert" data-alert data-alert-variant="info" data-alert-appearance="subtle"><div data-tone="info" data-appearance="subtle" data-content-gap="spaced" class="var-ui-alert__body"><p data-tone="info" data-appearance="subtle" data-content-gap="spaced" class="var-ui-alert__title">Registry icons</p><div data-tone="info" data-appearance="subtle" data-content-gap="spaced" class="var-ui-alert__content" data-alert-content>Alerts pull their tone glyph from IconProvider automatically.</div></div></div>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| variant | AlertTone | yes |  | Semantic tone that drives color and the default icon. |
| action | { href: string; label: string; } \| undefined | no |  | Optional text link rendered below the message body. |
| appearance | SurfaceAppearance \| undefined | no | subtle | Surface treatment. |
| children | ReactNode | no |  | Message body. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| icon | ReactNode | no |  | Override the default tone glyph; pass null to hide the icon slot. |
| title | string \| undefined | no |  | Optional bold headline above the body content. |

## Accessibility

Built on React Aria Components where applicable.