Alert Dialog

A modal confirmation dialog with no passive dismissal — the user must choose an explicit action or cancel.

<.alert_dialog></.alert_dialog>

Examples

Destructive action

Confirm an irreversible destructive operation.

<.alert_dialog id="example-delete">
  <:trigger>
    <.button variant="destructive">Delete account</.button>
  </:trigger>
  <.alert_dialog_header>
    <.alert_dialog_title id="example-delete">Are you absolutely sure?</.alert_dialog_title>
    <.alert_dialog_description id="example-delete">
      This action cannot be undone. This will permanently delete your account
      and remove your data from our servers.
    </.alert_dialog_description>
  </.alert_dialog_header>
  <.alert_dialog_footer>
    <.alert_dialog_cancel id="example-delete">Cancel</.alert_dialog_cancel>
    <.alert_dialog_action class="bg-destructive text-white hover:bg-destructive/90">
      Yes, delete account
    </.alert_dialog_action>
  </.alert_dialog_footer>
</.alert_dialog>

Show code

Outline trigger

Non-destructive confirmation with a neutral trigger.

<.alert_dialog id="example-logout">
  <:trigger>
    <.button variant="outline">Sign out</.button>
  </:trigger>
  <.alert_dialog_header>
    <.alert_dialog_title id="example-logout">Sign out?</.alert_dialog_title>
    <.alert_dialog_description id="example-logout">
      You will be signed out of your account on this device.
    </.alert_dialog_description>
  </.alert_dialog_header>
  <.alert_dialog_footer>
    <.alert_dialog_cancel id="example-logout">Stay signed in</.alert_dialog_cancel>
    <.alert_dialog_action>Sign out</.alert_dialog_action>
  </.alert_dialog_footer>
</.alert_dialog>

Show code

Props

Name	Type	Default	Values
class	:string
id	:string
inner_block (slot)	:slot
trigger (slot)	:slot