Dialog

A window placed on the top of the primary window or another dialog window. It renders the content underneath inert. Implements the ARIA dialog pattern for proper accessibility support.

Supports modal and non-modal modes

Focus is automatically trapped when modal

Can be controlled or uncontrolled

Esc closes the component automatically

Architecture

so-dialog
Slot: trigger You need to place an so-button here.
so-button
Slot: content
so-dialog-content
Slot: default
so-dialog-header
Slot: default
so-dialog-description
Slot: default
so-dialog-footer
Slot: default
so-dialog-button-secondary
Slot: default
so-dialog-button-primary
Slot: default

Reference

  • Dialog

    The root container that manages the state and behavior of the dialog system. Coordinates the interaction between trigger, content and optional backdrop components.

    • Attributes

      • default-open
        boolean
        /
        default: false

        The initial open state of the alert dialog when rendered. Use when you do not need to control its open state.

      • modal
        boolean
        /
        default: false

        When true, interaction with elements outside the dialog will be disabled and only dialog content will be visible to screen readers.

      • open
        boolean
        /
        default: -

        The controlled open state of the alert dialog. Must be used in combination with onOpenChange.

    • Events

      • onOpenChange

        Event handler called when the open state of the alert dialog changes.

  • Content

    The container that holds the dialog's content. Manages keyboard interactions and focus trapping.

  • Header

    The container for the dialog's header section, containing the title and the close-button.

  • Description

    The container for the dialog's descriptive content, providing additional context or details about the dialog's purpose.

  • Footer

    The container for the dialog's footer section, typically containing action buttons or controls.

  • Button Primary

    The primary action button for the dialog, typically used for confirming or accepting the dialog's proposed action.

    • Events

      • onClick

        Event handler called when the button is clicked.

  • Button Secondary

    The secondary action button for the dialog, typically used for canceling or dismissing the dialog.

    • Events

      • onClick

        Event handler called when the button is clicked.

Keyboard

  • Space

    Toggles the dialog open state.

  • Enter

    Toggles the dialog open state.

  • Tab

    Moves focus to the next focusable element. When modal, focus is trapped within the dialog.

  • Shift+Tab

    Moves focus to the previous focusable element. When modal, focus is trapped within the dialog.

  • Escape

    Closes the dialog and returns focus to the trigger element.

made for toddle