Dialog

A window overlaid on the primary window, trapping focus. Rendered as a fullscreen backdrop with a centered dialog box.

When to use

• Confirming destructive or irreversible actions.
• Collecting input that must be completed before continuing.

API

Dialog::new(id)

Creates a dialog with the given element ID.

Method	Type	Default	Description
.title(text)	impl Into<SharedString>	—	Dialog title
.description(text)	impl Into<SharedString>	—	Description text
.content(el)	impl IntoElement	—	Custom body content
.footer(el)	impl IntoElement	—	Footer element (typically actions)
.on_close(fn)	Fn(&ClickEvent, &mut Window, &mut App)	—	Close handler (backdrop click, ✕ button)
.focus_handle(&handle)	&FocusHandle	—	Focus handle for focus trapping

Usage

use gpui::{Component, div, prelude::*};
use components::{Button, ButtonVariant, Dialog};

if this.show_dialog {
    div().child(Component::new(
        Dialog::new("confirm-delete")
            .title("Are you absolutely sure?")
            .description("This action cannot be undone.")
            .on_close(cx.listener(|this, _, _, cx| {
                this.show_dialog = false;
                cx.notify();
            }))
            .footer(
                div()
                    .flex()
                    .justify_end()
                    .gap_2()
                    .child(Component::new(Button::new("Cancel").variant(ButtonVariant::Outline)))
                    .child(Component::new(Button::new("Delete"))),
            ),
    ))
}

Copy the source

crates/components/src/dialog.rs — self-contained, stateless, and free to modify.