Alert Dialog

New

A focused confirmation dialog that always requires explicit user action. Used for destructive or irreversible operations where an accidental dismissal could cause data loss.

API Reference

Attribute	Description	Type	Default
`id`	Unique identifier for the dialog (required for JavaScript control via `showModal()`). Auto-generated when omitted.	string	`""`
`title`	Heading text displayed at the top of the dialog	string	`"Are you sure?"`
`description`	Body text that explains the consequences of the action	string	`""`
`confirm_label`	Label for the confirm action button	string	`"Continue"`
`cancel_label`	Label for the cancel button	string	`"Cancel"`
`confirm_color`	DaisyUI color variant applied to the confirm button. Use `error` for destructive actions and `warning` for cautionary ones.	string	`"error"`
`hx`	Raw HTMX attribute string passed directly to the confirm button (e.g. `hx-delete="/items/1/" hx-target="#list"`)	string	`""`

confirm_color

error warning primary secondary accent success neutral

role="alertdialog": unlike the generic role="dialog", this signals to assistive technologies that an immediate response is required. Screen readers announce the dialog and read its label before other content.

aria-modal, aria-labelledby, aria-describedby: these attributes are applied automatically, pointing to the title element and description paragraph respectively.

No dismiss on outside click: unlike c-modal, clicking outside does not close the alert dialog — the user must explicitly choose Cancel or Confirm. This matches ARIA alert dialog conventions.

Focus trap: focus is managed natively by the HTML <dialog> element via showModal(), which traps focus inside the dialog until it is closed.

Examples

Usage

<c-button color="error" onclick="my_dialog.showModal()">Delete</c-button>
<c-alert-dialog id="my_dialog" title="Delete item?" confirm_label="Delete" />

Delete Confirmation

<c-button color="error" onclick="delete_vessel_dialog.showModal()">
  Delete Vessel
</c-button>

<c-alert-dialog
  id="delete_vessel_dialog"
  title="Delete vessel?"
  description="This will permanently remove MV Atlantic Star..."
  confirm_label="Delete"
  cancel_label="Cancel"
  confirm_color="error"
/>

Archive Confirmation (Warning)

<c-alert-dialog
  id="archive_route_dialog"
  title="Archive this route?"
  description="The route will be moved to the archive..."
  confirm_label="Archive"
  cancel_label="Keep Active"
  confirm_color="warning"
/>

Custom Slot Content

<c-alert-dialog
  id="transfer_ownership_dialog"
  title="Transfer fleet ownership?"
  description="You are about to transfer ownership..."
  confirm_label="Transfer"
  confirm_color="primary"
>
  <!-- Slot: additional content shown between description and actions -->
  <ul class="space-y-1 text-sm">
    <li>MV Atlantic Star</li>
    <li>MV Nordic Breeze</li>
  </ul>
</c-alert-dialog>

HTMX Integration

<c-button color="error" onclick="delete_item_htmx_dialog.showModal()">
  Delete Item
</c-button>

<c-alert-dialog
  id="delete_item_htmx_dialog"
  title="Delete item?"
  description="This action cannot be undone."
  confirm_label="Delete"
  confirm_color="error"
  hx='hx-delete="/api/v1/items/42/" hx-target="#item-list" hx-swap="outerHTML"'
/>