# `PUI.Alert`

Alert component for displaying important messages and status updates.

## Basic Usage

    <.alert>
      <p>This is an alert message.</p>
    </.alert>

## With Icon

    <.alert>
      <:icon>
        <.icon name="hero-information-circle" class="size-5" />
      </:icon>
      <p>Alert with an icon.</p>
    </.alert>

## With Title and Description

    <.alert>
      <:icon>
        <.icon name="hero-check-circle" class="size-5" />
      </:icon>
      <:title>Success!</:title>
      <:description>Your changes have been saved successfully.</:description>
    </.alert>

## Destructive Variant

Use the destructive variant for errors and warnings:

    <.alert variant="destructive">
      <:icon>
        <.icon name="hero-exclamation-triangle" class="size-5" />
      </:icon>
      <:title>Error</:title>
      <:description>Something went wrong.</:description>
    </.alert>

## Without Description

    <.alert>
      <:icon>
        <.icon name="hero-exclamation-triangle" class="size-5" />
      </:icon>
      <:title>Warning</:title>
    </.alert>

## Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `variant` | `string` | `"default"` | Alert style: "default" or "destructive" |
| `class` | `string` | `""` | Additional CSS classes |

## Slots

| Slot | Description |
|------|-------------|
| `icon` | Optional icon displayed at the start |
| `title` | Alert title text |
| `description` | Detailed description text |
| `inner_block` | Custom content (alternative to slots) |

# `alert`

## Attributes

* `class` (`:string`) - Defaults to `""`.
* `variant` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, `"destructive"`, or `"unstyled"`.
* `role` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `icon`
* `title` - Accepts attributes:

  * `class` (`:string`)
* `description` - Accepts attributes:

  * `class` (`:string`)
* `inner_block`

# `alert_description`

Renders the description of an alert.

## Attributes

* `class` (`:string`) - Defaults to `""`.
* `is_unstyled` (`:boolean`) - Defaults to `false`.
## Slots

* `inner_block`

# `alert_title`

Renders the title of an alert.

## Attributes

* `class` (`:string`) - Defaults to `""`.
* `is_unstyled` (`:boolean`) - Defaults to `false`.
## Slots

* `inner_block`

---

*Consult [api-reference.md](api-reference.md) for complete listing*