Component 02 of 60

Alert Dialog

A modal dialog that expects a response from the user.

site/src/previews/alert_dialog.rs

Starting the preview. GPUI compiles to WebAssembly, so the first load takes a few seconds. This browser has neither WebGPU nor WebGL 2, so the live preview cannot run. The code on this page still works. The preview did not start.

fn alert_dialog_preview(&self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    let handle = window
        .use_keyed_state("alert_dialog_preview.handle", cx, |_, _| {
            DialogHandle::new(false)
        })
        .read(cx)
        .clone();
    let popup = dialog_popup("alert_dialog_preview.popup", "Are you sure?", cx)
        .child(dialog_title("alert_dialog_preview.title", cx).child("Are you sure?"))
        .child(
            dialog_description("alert_dialog_preview.description", cx)
                .child("This action cannot be undone."),
        )
        .child(
            dialog_footer(cx)
                .child(alert_dialog_cancel("cancel").label("Cancel"))
                .child(alert_dialog_action("confirm").label("Continue")),
        );
    div()
        .child(dialog_trigger("alert_dialog_preview.trigger", &handle).label("Delete account"))
        .child(alert_dialog(
            "alert_dialog_preview",
            &handle,
            popup,
            window,
            cx,
        ))
}

Alert Dialog, running in the browser. The second tab shows the preview's own source, which includes its layout and demo state. For the smallest working example, see Usage below. Download the whole showcase for its imports and helpers.

Installation

After the one-time setup, run the command from your app root. The CLI writes the modules and keeps src/ui/mod.rs in step.

gpuicn add alert-dialog

If you prefer to copy the files by hand, declare them yourself:

// src/ui/mod.rs
pub mod theme;
pub mod button;
pub mod dialog;
pub mod alert_dialog;

// src/main.rs
mod ui;

Usage

Put this in a view module and return example(handle, window, cx) from its render method.

use crate::ui::alert_dialog::*;
use crate::ui::dialog::*;
use gpui_kit::{App, IntoElement, ParentElement, Window};

fn example(handle: &DialogHandle, window: &mut Window, cx: &mut App) -> impl IntoElement {
    let popup = dialog_popup("profile.popup", "Edit profile", cx)
        .child(dialog_title("profile.title", cx).child("Edit profile"))
        .child(dialog_action("profile.save", handle).label("Save"));
    gpui_kit::div()
        .child(dialog_trigger("profile.open", handle).label("Edit profile"))
        .child(alert_dialog("profile", handle, popup, window, cx))
}

API reference

pub fn alert_dialog(
    id: impl Into<ElementId>,
    handle: &DialogHandle,
    popup: impl IntoElement,
    window: &mut Window,
    cx: &mut App,
) -> AlertDialog

Keep this host mounted while closed; validate the action in `.on_ok(...)`.

pub fn alert_dialog_action(id: impl Into<ElementId>) -> DialogControl

Explicit confirm button; the host's callback may veto dismissal.

pub fn alert_dialog_cancel(id: impl Into<ElementId>) -> DialogControl

Cancel button with keyboard and focus behavior from Kit.

Installed source, 67 lines

//! Nova confirmation dialog using Kit's non-dismissible alert host.
use super::{
    button::ButtonVariant,
    dialog::{
        DialogControl, DialogControlAction, DialogHandle, dialog_backdrop, modal_focus,
        modal_viewport,
    },
    theme::UiTheme,
};
pub use gpui_kit::base::AlertDialog;
use gpui_kit::{
    App, ElementId, InteractiveElement as _, IntoElement, ParentElement as _, Styled, Window, div,
};

/// Keep this host mounted while closed; validate the action in `.on_ok(...)`.
pub fn alert_dialog(
    id: impl Into<ElementId>,
    handle: &DialogHandle,
    popup: impl IntoElement,
    window: &mut Window,
    cx: &mut App,
) -> AlertDialog {
    let id = id.into();
    let focus = modal_focus::prepare(id.clone(), handle.is_open(), window, cx);
    let scope = modal_focus::ModalFocus::new(id.clone());
    let popup = scope
        .trap(div(), true)
        .id(id.clone())
        .track_focus(&focus)
        .w_full()
        .max_w(UiTheme::read(cx).space(96.))
        .child(scope.boundary(false))
        .child(scope.boundary(true))
        .child(modal_viewport((id, "viewport"), popup, window, cx));
    AlertDialog::new(cx)
        .handle(handle.clone())
        .close_on_escape(false)
        .backdrop(dialog_backdrop(cx))
        .popup(
            div()
                .absolute()
                .inset_0()
                .flex()
                .items_center()
                .justify_center()
                .p(UiTheme::read(cx).space(4.))
                .child(popup),
        )
}
/// Explicit confirm button; the host's callback may veto dismissal.
pub fn alert_dialog_action(id: impl Into<ElementId>) -> DialogControl {
    DialogControl::new(
        id,
        DialogControlAction::Confirm,
        "gpuicn-alert-dialog-action-anchor",
    )
}
/// Cancel button with keyboard and focus behavior from Kit.
pub fn alert_dialog_cancel(id: impl Into<ElementId>) -> DialogControl {
    DialogControl::new(
        id,
        DialogControlAction::Cancel,
        "gpuicn-alert-dialog-cancel-anchor",
    )
    .variant(ButtonVariant::Outline)
}

Platform notes

Visual reference: shadcn/ui 4.19.0, Neutral Nova. Implementation: crates/ui/registry/alert_dialog/alert_dialog.rs, using GPUI Kit 0.6.4.

A retained Kit DialogHandle owns visibility. Explicit confirm and cancel buttons route actions through the alert host, which can veto confirmation. Tab traversal stays within the popup and closing restores focus. Enter activates the focused button; the host does not convert every Enter press into confirmation.

The Rust source and Usage example define the supported API. Browser DOM/CSS behavior, exact exit animations and cross-platform screen-reader parity are not implied by the native component. See migration qualification for the checks completed on this revision.