Dialog

Open from a button

The browser's modal; Esc, the close button or a click outside closes it.

out.push_str(r#"<button type="button" class="u-btn u-btn-outline u-md" commandfor="dlg-info" command="show-modal" data-component="button"><span>Show details</span></button>"#);
Dialog { id: "dlg-info", title: "Ticket 4127" }.render(
    out,
    |out| out.push_str("<p>Opened by Maya Chen two hours ago.</p>"),
);

Confirm a deletion

Names the object and the consequence; Cancel first, the verb last.

out.push_str(r#"<button type="button" class="u-btn u-btn-danger u-md" commandfor="dlg-delete" command="show-modal" data-component="button"><span>Delete agent</span></button>"#);
Dialog { id: "dlg-delete", title: "Delete Triage agent?" }.render(
    out,
    |out| {
        out.push_str("<p>Its 214 runs stay in the log; it stops answering tickets.</p>");
        out.push_str(r#"<button type="button" class="u-btn u-btn-outline u-md" commandfor="dlg-delete" command="close" autofocus data-component="button"><span>Cancel</span></button>"#);
        Button::new("Delete agent", Variant::Danger).html(out);
    },
);

A form inside

A dialog can hold a short form; the first field takes focus.

out.push_str(r#"<button type="button" class="u-btn u-btn-solid u-md" commandfor="dlg-rename" command="show-modal" data-component="button"><span>Rename</span></button>"#);
Dialog { id: "dlg-rename", title: "Rename the app" }.render(
    out,
    |out| {
        out.push_str(r#"<label class="u-label" for="dlg-name">Name</label><input class="u-input" id="dlg-name" value="Service desk" autofocus>"#);,
    },
);

On the Mac

The same vocabulary drawn by Ocean UI's native face (egui on Metal), as the gallery's snapshot.

Use it

use ocean_ui_web::Dialog;
Dialog { id: "rename", title: "Rename project" }.render(&mut out, |out| out.push_str("…"))

use ocean_ui_native::{containers::Dialog, egui::Id};
Dialog { id: Id::unique("gallery.dialog"), title: "Delete this chat?".into(), open: &mut open }.show(ui, |ui| ui.label("…"))

Cargo feature base of ocean-ui-core, ocean-ui-web and ocean-ui-native; available since 2026-10-29.

Props

Accessibility

• The dialog is labelled by its h2 title through aria-labelledby.
• Opened modally, it makes the rest of the page inert and moves focus inside; when it closes, focus returns to its opener.
• The close button shows only an icon and carries aria-label="Close".

Related

• Button
• Popover
• Command palette

Markdown

The same page as Markdown, for an agent or a pull request.

# Dialog

The browser's modal dialog, named by its title and closed by Esc, its close button or a click outside.

A dialog asks for one focused task while the page waits behind it. It is a <dialog> opened without script by a button carrying commandfor with its id and command="show-modal". Esc, the close button in its head or a click outside closes it; it fades and rises in through CSS alone, and not at all under reduced motion.

## Use it

Web:

```rust
use ocean_ui_web::Dialog;
Dialog { id: "rename", title: "Rename project" }.render(&mut out, |out| out.push_str("…"))
```

Native:

```rust
use ocean_ui_native::{containers::Dialog, egui::Id};
Dialog { id: Id::unique("gallery.dialog"), title: "Delete this chat?".into(), open: &mut open }.show(ui, |ui| ui.label("…"))
```

Cargo feature `base`; since 2026-10-29.

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `id` | `&str` | `—` | The dialog's id, which its opener names with commandfor and its title's id extends as <id>-title. |
| `title` | `&str` | `—` | The heading in the dialog's head and its accessible name. |

On the Mac: ![Dialog, dark](/ui/native/dialog-dark.png) ![Dialog, light](/ui/native/dialog-light.png)

## Examples

### Open from a button

The browser's modal; Esc, the close button or a click outside closes it.

```rust
out.push_str(r#"<button type="button" class="u-btn u-btn-outline u-md" commandfor="dlg-info" command="show-modal" data-component="button"><span>Show details</span></button>"#);
Dialog { id: "dlg-info", title: "Ticket 4127" }.render(
    out,
    |out| out.push_str("<p>Opened by Maya Chen two hours ago.</p>"),
);
```

### Confirm a deletion

Names the object and the consequence; Cancel first, the verb last.

```rust
out.push_str(r#"<button type="button" class="u-btn u-btn-danger u-md" commandfor="dlg-delete" command="show-modal" data-component="button"><span>Delete agent</span></button>"#);
Dialog { id: "dlg-delete", title: "Delete Triage agent?" }.render(
    out,
    |out| {
        out.push_str("<p>Its 214 runs stay in the log; it stops answering tickets.</p>");
        out.push_str(r#"<button type="button" class="u-btn u-btn-outline u-md" commandfor="dlg-delete" command="close" autofocus data-component="button"><span>Cancel</span></button>"#);
        Button::new("Delete agent", Variant::Danger).html(out);
    },
);
```

### A form inside

A dialog can hold a short form; the first field takes focus.

```rust
out.push_str(r#"<button type="button" class="u-btn u-btn-solid u-md" commandfor="dlg-rename" command="show-modal" data-component="button"><span>Rename</span></button>"#);
Dialog { id: "dlg-rename", title: "Rename the app" }.render(
    out,
    |out| {
        out.push_str(r#"<label class="u-label" for="dlg-name">Name</label><input class="u-input" id="dlg-name" value="Service desk" autofocus>"#);,
    },
);
```

## Accessibility

- The dialog is labelled by its h2 title through aria-labelledby.
- Opened modally, it makes the rest of the page inert and moves focus inside; when it closes, focus returns to its opener.
- The close button shows only an icon and carries aria-label="Close".

## Related

- [Button](/ui/components/button.md)
- [Popover](/ui/components/popover.md)
- [Command palette](/ui/components/command-palette.md)