Renders a confirmation dialog (role="alertdialog"). The cancel button is focused first (via the hook, not the autofocus attribute, which browsers can honour on page load even inside a closed dialog) so Enter never confirms by accident; Escape cancels; clicking the backdrop does nothing.

<.alert_dialog id="delete-post" title="Delete this post?"
  description="This permanently removes the post and its comments."
  confirm="Delete" on_confirm={JS.push("delete", value: %{id: @post.id})} />

on_confirm runs and then the dialog closes.

Attributes

• id (:string) (required)
• show (:boolean) - Defaults to false.
• title (:string) (required)
• description (:string) - Defaults to nil.
• color (:string) - Defaults to "danger". Must be one of "danger", "warning", "info", or "accent".
• confirm (:string) - defaults to "Confirm". Defaults to nil.
• cancel (:string) - defaults to "Cancel". Defaults to nil.
• on_confirm (Phoenix.LiveView.JS) (required)
• on_close (Phoenix.LiveView.JS) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Renders a modal dialog.

Open it from the client with SlopUI.JS.open_dialog/1, or from the server with show={@show}. Close buttons inside the dialog need no JavaScript at all when wrapped in <form method="dialog">.

<.button phx-click={SlopJS.open_dialog("#confirm")}>Delete</.button>

<.dialog id="confirm" on_close={JS.push("cancelled")}>
  <:title>Delete post?</:title>
  <:description>This cannot be undone.</:description>
  Body content
  <:footer>
    <form method="dialog"><.button variant="outline">Cancel</.button></form>
    <.button color="danger" phx-click="delete">Delete</.button>
  </:footer>
</.dialog>

Accessibility: aria-labelledby and aria-describedby point at the title and description. Focus is trapped and restored by the platform.

Attributes

• id (:string) (required)
• show (:boolean) - server-controlled open state. Defaults to false.
• size (:string) - Defaults to "md". Must be one of "sm", "md", "lg", "xl", or "full".
• placement (:string) - Defaults to "center". Must be one of "center", or "top".
• dismissable (:boolean) - close on Escape and backdrop click. Defaults to true.
• close_button (:boolean) - Defaults to true.
• on_open (Phoenix.LiveView.JS) - JS command run after the dialog opens. Defaults to nil.
• on_close (Phoenix.LiveView.JS) - JS command run after the dialog closes. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• title
• description
• inner_block
• footer

Renders a sheet: a dialog docked to a viewport edge. Same API as dialog/1 plus side.

<.sheet id="filters" side="right">
  <:title>Filters</:title>
  ...
</.sheet>

Attributes

• id (:string) (required)
• show (:boolean) - Defaults to false.
• side (:string) - Defaults to "right". Must be one of "right", "left", "top", or "bottom".
• size (:string) - Defaults to "md". Must be one of "sm", "md", "lg", or "xl".
• dismissable (:boolean) - Defaults to true.
• close_button (:boolean) - Defaults to true.
• on_open (Phoenix.LiveView.JS) - Defaults to nil.
• on_close (Phoenix.LiveView.JS) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• title
• description
• inner_block
• footer