Component Modal

Modal

A modal dialog panel shell.

This component only renders the dialog panel (title/content/actions). It does not implement overlay placement, focus trapping, or keyboard dismissal. Those behaviors live at the application layer.

When to use

• You already have an overlay (mask/layer management) at the app/widget layer, and you need a consistent-styled dialog panel.
• You want standardized slots: title / content / action row.

Not a good fit:

• You want the component to manage open/close, overlay, focus trapping, and Esc-to-dismiss. Those are part of interaction lifecycle management and should live at the widget layer (for example, a future ModalLayer).

API

• modal(): constructor
• title(...): optional title
• content(...): main content
• actions(...): optional action row
• width(px(...)): width (default: 520px)
• closable(bool): show close button in header
• on_close(|window, cx| ...): callback when close button is clicked
• bg(...) / border(...): override theme colors

Related helpers:

• modal_actions_row(direction, [...]): right-aligned button row (pass cx.theme().text_direction for RTL support)
• modal_primary_action("..."): primary button style (useful for confirm actions)

Defaults

• Width: 520px
• Background: theme-driven (theme.surface.raised by default)

Example

use yororen_ui::component::{
    button, modal, modal_actions_row,
};
use yororen_ui::theme::ActionVariantKind;

let view = modal()
    .title("Delete server?")
    .content("This action cannot be undone.")
    .actions(modal_actions_row(
        cx.theme().text_direction,
        [
            button().variant(ActionVariantKind::Neutral).child("Cancel").into_any_element(),
            button().variant(ActionVariantKind::Danger).child("Delete").into_any_element(),
        ],
    ));

Example: Custom width + richer content

use gpui::px;
use yororen_ui::component::{label, modal, modal_actions_row, button};
use yororen_ui::theme::ActionVariantKind;

let view = modal()
    .width(px(640.))
    .title("Advanced settings")
    .content(
        label("Put any layout here: forms, lists, explanatory text, etc.")
    )
    .actions(modal_actions_row(
        cx.theme().text_direction,
        [
            button().variant(ActionVariantKind::Neutral).child("Close").into_any_element(),
            button().variant(ActionVariantKind::Primary).child("Save").into_any_element(),
        ],
    ));

Example: Closable modal

use yororen_ui::component::{label, modal};

let view = modal()
    .title("Settings")
    .closable(true)
    .on_close(|window, cx| {
        // Handle close - e.g., hide the modal
    })
    .content(label("Modal content here"));