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: trigger You 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

Reference

  • 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.

Keyboard

  • 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.

made for toddle