Alert

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

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

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.

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.

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.

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, 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.