# Alert

A bordered callout with an icon, a title, a description and whatever it offers to do about itself.

```slint
import { Alert } from "@glint/components/alert.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 480px;

                Alert {
                    icon: IconSet.Terminal;
                    title: "Heads up!";
                    description: "You can add components and design tokens to your app using the Glint library.";
                }
            }
        }
    }
}
```

## Usage

```slint
import { Alert, AlertVariant } from "@glint/components/alert.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component AppWindow inherits Window {
    width: 560px;
    height: 240px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        Alert {
            icon: IconSet.Info;
            title: "Update available";
            description: "A new version of your application dependencies is available for download.";
        }
    }
}
```

`Alert` renders a bordered card with optional icon, heading, and body description. Additional interactive elements such as buttons or links can be placed in its `@children` slot.

## Examples

### Variants

Alert supports `AlertVariant.default` and `AlertVariant.destructive` tones. The destructive variant applies red error accents to borders, icons, and titles.

```slint
import { Alert, AlertVariant } from "@glint/components/alert.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 320px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 480px;
                spacing: 16px;

                Alert {
                    variant: AlertVariant.default;
                    icon: IconSet.CircleCheck;
                    title: "Deployment successful";
                    description: "Your changes have been deployed to production servers.";
                }

                Alert {
                    variant: AlertVariant.destructive;
                    icon: IconSet.TriangleAlert;
                    title: "Authentication error";
                    description: "Your session has expired. Please sign in again to continue.";
                }
            }
        }
    }
}
```

### Action content

Use the `@children` slot to provide inline action buttons or remediation links directly inside the callout.

```slint
import { Alert, AlertVariant } from "@glint/components/alert.slint";
import { Button, ButtonSize, ButtonVariant } from "@glint/components/button.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 240px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 480px;

                Alert {
                    variant: AlertVariant.destructive;
                    icon: IconSet.TriangleAlert;
                    title: "Payment method required";
                    description: "Your billing cycle ended and payment could not be processed.";

                    HorizontalLayout {
                        spacing: 8px;
                        padding-top: 4px;

                        Button {
                            text: "Update payment";
                            size: ButtonSize.sm;
                        }

                        Button {
                            text: "Remind later";
                            size: ButtonSize.sm;
                            variant: ButtonVariant.outline;
                        }
                    }
                }
            }
        }
    }
}
```

## API Reference

### Properties

| Property      | Type              | Default                | Description                                                     |
| ------------- | ----------------- | ---------------------- | --------------------------------------------------------------- |
| `title`       | `in string`       | no default             | Bold heading at the top of the alert.                           |
| `description` | `in string`       | no default             | Body text below the title.                                      |
| `icon`        | `in LucideIcon`   | no default             | Leading icon, normally selected from `IconSet` in lucide-slint. |
| `variant`     | `in AlertVariant` | `AlertVariant.default` | Tone — `default` or `destructive`.                              |

### Enums

| Enum           | Values                   |
| -------------- | ------------------------ |
| `AlertVariant` | `default`, `destructive` |

## Accessibility

- **It carries no role, and naming it is yours.** `Alert` declares no `accessible-role` and no live region: it draws a border, an icon and two runs of text, and a screen reader meets the title and description as text where they sit. That is right for a callout that is part of the page a reader is already walking, and wrong for one that appears in response to something they did — nothing announces it, because nothing here knows it is new.
- **An alert that appears has to say so.** Set both properties at the call site; Slint refuses `accessible-label` without `accessible-role`, and the live region is what makes the announcement happen at all.

```slint
import { Alert, AlertVariant } from "@glint/components/alert.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component AppWindow inherits Window {
    width: 420px;
    background: Tokens.color-background;

    in property <string> message;

    VerticalLayout {
        padding: 16px;

        Alert {
            accessible-role: text;
            accessible-label: root.message;
            accessible-live-region: AccessibleLiveness.assertive;

            variant: AlertVariant.destructive;
            title: "Sync failed";
            description: root.message;
        }
    }
}
```

- **A transient notice is a [Toast](/docs/components/toast), not an alert.** Toast already declares the live region — polite, or assertive on the error variant — and takes itself back down. Reach for `Alert` when the notice belongs to the layout and stays there.
- **Color is never the only signal.** The `destructive` variant changes the border, the tint and the text color, none of which reaches the accessibility tree. The `title` is what has to say the alert is an error, and the `icon` is what says it to a reader who does not distinguish the hue.
- **The actions inside keep their own accessibility.** A `Button` in the `@children` slot has its own role, name, focus ring and default action; `Alert` neither wraps nor intercepts them.