Alert Dialog

Modal confirmation dialog that interrupts the user and expects a response.

<.button
  color="red"
  phx-click={Phoenix.LiveView.JS.dispatch("open", to: "#docs-alert-dialog-hero")}
>
  Revoke access
</.button>
<.alert_dialog id="docs-alert-dialog-hero" target="body" default_state="closed">
  <:title>Revoke access</:title>
  <:description>
    Are you sure? This application will no longer be accessible and any existing sessions will be expired.
  </:description>
  <.flex gap="3" mt="4" justify="end">
    <.button
      variant="soft"
      color="gray"
      phx-click={Phoenix.LiveView.JS.dispatch("close", to: "#docs-alert-dialog-hero")}
    >
      Cancel
    </.button><.button
      color="red"
      phx-click={Phoenix.LiveView.JS.dispatch("close", to: "#docs-alert-dialog-hero")}
    >Revoke access</.button>
  </.flex>
</.alert_dialog>

API Reference

This component inherits behavior from the Alert Dialog primitive. Open and close via JS.dispatch("open" | "close", to: "#id") on the dialog root id. A portal target selector is required (commonly "body").

Themes Alert Dialog exposes alert_dialog/1 only — there are no separate Trigger, Action, or Cancel parts. Use :title and :description slots for accessible labelling, then compose action buttons in the default slot. Size and inset examples are omitted until those props land on the Themes wrapper.

Root

Contains the portaled overlay, title, description, and action buttons.

Prop	Type	Default	Description
`accent_color`	`string`	`"blue"`
`class`	`string`	`""`
`default_state`	`string`	`"closed"`	The default state of the dialog (open/closed)
`gray_color`	`string`	`"slate"`
`id`	`string`	`—`	Unique identifier for the alert dialog
`radius`	`string`	`—`	Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
`scaling`	`string`	`"100%"`
`style`	`string`	`""`
`target`	`string`	`—`	The target element to attach the dialog to

accent_color

Type string Default "blue"

class

Type string Default ""

default_state The default state of the dialog (open/closed)

Type string Default "closed"

gray_color

Type string Default "slate"

id Unique identifier for the alert dialog

Type string Default —

radius Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.

Type string Default —

scaling

Type string Default "100%"

style

Type string Default ""

target The target element to attach the dialog to

Type string Default —