# Alert

Render a structured status message for info, success, warning, or danger states. Basically, it's the UI equivalent of tapping the user on the shoulder very persistently.

## Notes

- Use Alert for stateful feedback that absolutely needs emphasis. If your app is on fire, use a danger alert.
- Keep titles short and descriptions direct. No one wants to read a novel when their payment has just failed.
- Don't overuse them! If everything is an alert, nothing is an alert.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| title (required) | `string` | - | The title of the alert. |
| description | `string` | - | A supporting description for the alert. |
| variant | `'info' | 'success' | 'warning' | 'danger'` | 'info' | The status variant of the alert. |
| class | `string` | - | Additional CSS classes. |

## Example

```astro
<div class="flex flex-col gap-3">
  <Alert title="Heads up" description="Tokens ship separately." variant="info" />
  <Alert title="Published" description="Release tag moved to latest." variant="success" />
  <Alert title="Check config" description="Missing package token in local shell." variant="warning" />
  <Alert title="Deploy failed" description="Production build needs attention before retry." variant="danger" />
</div>
```