Alert dialog

A modal dialog that interrupts the user with important information requiring immediate attention or action.

A thin preset over Dialog: role="alertdialog", and closeOnInteractOutside/closeOnEscape forced to false so the user has to pick an explicit action to dismiss it. Everything inside is regular Dialog:* subcomponents.

The "Continue" button in the example below only dispatches --close. In a real alert dialog it should perform the destructive action first (e.g. submit a form) and only close on success.

Usage

<twig:ui:AlertDialog id="delete-account-dialog">
    <twig:ui:Dialog:Trigger>
        <twig:ui:Button variant="outline" {{ ...dialog_trigger_attrs }}>Delete account</twig:ui:Button>
    </twig:ui:Dialog:Trigger>
    <twig:ui:Dialog:Content>
        <twig:ui:Dialog:Header>
            <twig:ui:Dialog:Title>Are you absolutely sure?</twig:ui:Dialog:Title>
            <twig:ui:Dialog:Description>
                This action cannot be undone. This will permanently delete your account and remove
                your data from our servers.
            </twig:ui:Dialog:Description>
        </twig:ui:Dialog:Header>
        <twig:ui:Dialog:Footer>
            <twig:ui:Button variant="outline" command="--close" commandfor="delete-account-dialog">Cancel</twig:ui:Button>
            <twig:ui:Button color="danger" command="--close" commandfor="delete-account-dialog">Continue</twig:ui:Button>
        </twig:ui:Dialog:Footer>
    </twig:ui:Dialog:Content>
</twig:ui:AlertDialog>

API Reference

`<twig:ui:AlertDialog>`

Prop	Type	Description
`open`	`boolean`	Whether the dialog is open. Renders as a native `open` attribute on the root element, toggling it dynamically opens or closes the dialog, see `Dialog`. Defaults to `false`
`id`	`string`	The dialog's DOM id, used as the `commandfor` target. Defaults to an auto-generated value
`ariaLabel`	`string`	Accessible name for the content when it doesn't render a `Dialog:Title`. Defaults to `null`

Block	Description
`content`	The dialog structure, built from `Dialog:Trigger`, `Dialog:Content`, `Dialog:Header`, `Dialog:Title`, `Dialog:Description` and `Dialog:Footer` — see the `Dialog` reference for each