Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Focus is automatically trapped

Can be controlled or uncontrolled

Esc closes the component automatically

Architecture

so-alert-dialog

Slot: triggerYou need to place an so-button here.

so-button

Slot: content

so-alert-dialog-content

Slot: default

so-alert-dialog-header

Slot: default

so-alert-dialog-description

Slot: default

so-alert-dialog-footer

Slot: default

so-alert-dialog-button-secondary

Slot: default

so-alert-dialog-button-primary

Slot: default

Alert 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.
  - 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 alert dialog's content. Manages keyboard interactions and focus trapping.
Header
The container for the alert dialog's header section, containing the title and the close-button.
Description
The container for the alert dialog's descriptive content, providing additional context or details about the dialog's purpose.
Footer
The container for the alert dialog's footer section, typically containing action buttons or controls.
Button Primary
The primary action button for the alert 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 alert dialog, typically used for canceling or dismissing the dialog.
- Events
  - onClick
    Event handler called when the button is clicked.

Space
Toggles the alert dialog open state.
Enter
Toggles the alert dialog open state.
Tab
Moves focus to the next focusable element. Focus is trapped within the alert dialog.
Shift+Tab
Moves focus to the previous focusable element. Focus is trapped within the dialog.
Escape
Closes the dialog and returns focus to the trigger element.