Overlay

AlertDialog

Confirmation modal for destructive or irreversible actions. role='alertdialog' and overlay-click is disabled — the user must explicitly choose.

Examples

Confirm

(no choice yet)

<Button onclick={() => open = true}>Confirm action</Button>
<AlertDialog
  bind:open
  title="Save changes?"
  description="Your edits will be published to the live site."
  onConfirm={() => result = 'confirmed'}
  onCancel={() => result = 'cancelled'}
/>

tone="danger"

<AlertDialog
  bind:open
  tone="danger"
  title="Delete library?"
  description="This permanently removes 1,204 books and 8,421 passages."
  confirmLabel="Delete"
/>

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Bindable open state.
`title`	`string`	`—`	Heading text.
`description`	`string`	`—`	Body text — replaces the children slot for AlertDialog.
`confirmLabel`	`string`	`'Confirm'`	Label for the action button.
`cancelLabel`	`string`	`'Cancel'`	Label for the dismiss button.
`tone`	`'default' \| 'danger'`	`'default'`	'danger' colors the confirm button red.
`onConfirm`	`() => void`	`—`	Called when Confirm is clicked.
`onCancel`	`() => void`	`—`	Called when Cancel is clicked.

Install

CLI

npm install bits-ui
npx @a3tai/mittsu add alert-dialog