SaladUI

Alert Dialog

Alert Dialog component

Read more Read less

Examples:

<.alert_dialog>
   <.alert_dialog_trigger aschild>
     <button variant="outline">show dialog</button>
   </.alert_dialog_trigger>
   <.alert_dialog_content>
     <.alert_dialog_header>
       <.alert_dialog_title>are you absolutely sure?</.alert_dialog_title>
       <.alert_dialog_description>
         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>cancel</.alert_dialog_cancel>
       <.alert_dialog_action>continue</.alert_dialog_action>
     </.alert_dialog_footer>
   </.alert_dialog_content>
 </.alert_dialog>
Attribute Type Documentation Default Value
Required id * :string Id to identify alert dialog, alert_dialog_trigger use this id to trigger show dialog
open :boolean false
Required inner_block * :slot 
<.alert_dialog_trigger builder={builder}>
 <.button variant="outline">Show dialog</.button>
</.alert_dialog_trigger>
<.alert_dialog_content builder={builder}>
 <.alert_dialog_header>
   <.alert_dialog_title>Are you absolutely sure?</.alert_dialog_title>
   <.alert_dialog_description>
     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 builder={builder}>Cancel</.alert_dialog_cancel>
   <.alert_dialog_action phx-click={hide_alert_dialog(builder) |> JS.push("welcome")}>Continue</.alert_dialog_action>
 </.alert_dialog_footer>
</.alert_dialog_content>