AlertDialog

A modal confirmation dialog that interrupts the user with important content and expects an explicit response.

import { Button, ButtonVariant } from "@glint/components/button.slint";
import { AlertDialog } from "@glint/components/alert-dialog.slint";
import { Tokens } from "@glint/theme/tokens.slint";

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

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Button {
                text: "Delete account";
                variant: ButtonVariant.destructive;
                haspopup: true;
                clicked => { alert.open = true; }
            }
        }
    }

    alert := AlertDialog {
        width: parent.width;
        height: parent.height;
        title: "Are you absolutely sure?";
        description: "This action cannot be undone. This will permanently delete your account and remove your data from our servers.";
        action-label: "Delete account";
        cancel-label: "Cancel";
    }
}

Usage

import { AlertDialog } from "@glint/components/alert-dialog.slint";

export component AppWindow inherits Window {
    in-out property <bool> deleting: false;
    callback perform-delete();

    VerticalLayout {
        // your screen layout
    }

    // Last child of the window, sized to it: Slint has no portals, so what
    // draws on top is what comes last.
    AlertDialog {
        width: parent.width;
        height: parent.height;
        open <=> root.deleting;
        title: "Are you sure?";
        description: "This action cannot be undone.";
        action-label: "Delete";
        confirmed => { root.perform-delete(); }
    }
}

An AlertDialog is a focused confirmation modal that requires an explicit choice. Unlike Dialog, it provides no freeform body slot — its description is the entire message — and clicking the backdrop is intentionally a no-op so a stray click cannot dismiss an unanswered question.

Mount it last among the window’s children, sized to width: parent.width; height: parent.height.

Examples

Compact size

size offers two width presets: default (420px) for standard confirmation prompts and sm (320px) for brief questions that need little horizontal room.

import { Button, ButtonVariant } from "@glint/components/button.slint";
import { AlertDialog, AlertDialogSize } from "@glint/components/alert-dialog.slint";
import { Tokens } from "@glint/theme/tokens.slint";

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

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Button {
                text: "Discard draft";
                variant: ButtonVariant.outline;
                haspopup: true;
                clicked => { alert.open = true; }
            }
        }
    }

    alert := AlertDialog {
        width: parent.width;
        height: parent.height;
        size: AlertDialogSize.sm;
        title: "Discard draft?";
        description: "Your changes will not be saved.";
        action-label: "Discard";
    }
}

Action variant

action-variant styles the confirm button with any ButtonVariant. It defaults to ButtonVariant.destructive for destructive confirmations, and you set ButtonVariant.default or ButtonVariant.outline when asking for confirmation of a non-destructive action.

import { Button, ButtonVariant } from "@glint/components/button.slint";
import { AlertDialog } from "@glint/components/alert-dialog.slint";
import { Tokens } from "@glint/theme/tokens.slint";

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

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Button {
                text: "Publish release";
                haspopup: true;
                clicked => { alert.open = true; }
            }
        }
    }

    alert := AlertDialog {
        width: parent.width;
        height: parent.height;
        title: "Publish release v2.0?";
        description: "This will make the new version available to all active subscribers.";
        action-label: "Publish";
        action-variant: ButtonVariant.default;
    }
}

Handling confirmation and cancellation

confirmed fires when the action button is pressed; cancelled fires when the Cancel button is pressed or when the user presses Escape. The alert dialog closes itself on either path.

import { Button, ButtonVariant } from "@glint/components/button.slint";
import { AlertDialog } from "@glint/components/alert-dialog.slint";
import { Tokens } from "@glint/theme/tokens.slint";

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

    in-out property <string> message: "Ready to archive";

    VerticalLayout {
        alignment: center;
        spacing: 12px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Button {
                text: "Archive project";
                variant: ButtonVariant.outline;
                haspopup: true;
                clicked => { alert.open = true; }
            }
        }

        Text {
            text: root.message;
            color: Tokens.color-muted-foreground;
            horizontal-alignment: center;
        }
    }

    alert := AlertDialog {
        width: parent.width;
        height: parent.height;
        title: "Archive this project?";
        description: "Archived projects become read-only for all team members.";
        action-label: "Archive";
        action-variant: ButtonVariant.default;
        confirmed => { root.message = "Project archived"; }
        cancelled => { root.message = "Archive cancelled"; }
    }
}

Restoring focus

restore-focus fires on every close, so you can return keyboard focus to the button that triggered the alert dialog.

import { Button, ButtonVariant } from "@glint/components/button.slint";
import { AlertDialog } from "@glint/components/alert-dialog.slint";
import { Tokens } from "@glint/theme/tokens.slint";

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

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            trigger := Button {
                text: "Remove member";
                variant: ButtonVariant.destructive;
                haspopup: true;
                clicked => { alert.open = true; }
            }
        }
    }

    alert := AlertDialog {
        width: parent.width;
        height: parent.height;
        title: "Remove team member?";
        description: "They will lose access to all shared repositories.";
        action-label: "Remove";
        restore-focus => { trigger.focus(); }
    }
}

API Reference

Properties

Property	Type	Default	Description
`open`	`in-out bool`	`false`	Two-way; consumer sets true to show, Glint sets false on close.
`title`	`in string`	no default	Heading at the top of the modal.
`description`	`in string`	no default	Body text describing the consequences of the action.
`action-label`	`in string`	`@tr("Continue")`	Label for the destructive button (right side).
`cancel-label`	`in string`	`@tr("Cancel")`	Label for the safe button (left side).
`action-variant`	`in ButtonVariant`	`ButtonVariant.destructive`	Style for the action button — defaults to `destructive`.
`size`	`in AlertDialogSize`	`AlertDialogSize.default`	Width preset — `default` or the compact `sm`.

Callbacks

Callback	Description
`confirmed()`	Fired when the action button is pressed; the modal closes itself.
`cancelled()`	Fired on Cancel or Escape; the modal closes itself.
`restore-focus()`	Fired on EVERY close, including one the consumer drives by setting `open = false`, so keyboard focus always gets a new home: `restore-focus => { my-button.focus(); }`. Slint exposes no "previously focused element", so only the trigger's owner can name it. Same contract `Dialog`, `Sheet` and `Drawer` publish.

Enums

Enum	Values
`ButtonVariant`	`default`, `outline`, `secondary`, `ghost`, `link`, `destructive`, `glow`, `glass`
`AlertDialogSize`	`default`, `sm`

Accessibility

Role and name. Slint has no alertdialog role, so the open panel claims the closest landmark it has — a region — named by title and described by description. Assistive technology announces both upon presentation.
Initial focus. Opening the alert dialog moves keyboard focus to the Cancel button by default, ensuring that an accidental Enter keypress never triggers a destructive action.
Keyboard navigation. Tab and Shift+Tab cycle focus exclusively between the Cancel and Action buttons inside the modal card.
Keyboard dismissal. Escape fires cancelled() and closes the alert dialog.
No backdrop dismissal. Clicks on the dimmed scrim are ignored: unlike Dialog, an alert dialog requires the user to explicitly select one of the two choices.
Focus restoration. restore-focus fires on every close so focus can be returned to the opening trigger.
The trigger. The control that opens an alert dialog should set haspopup: true.