AlertDialog

Confirmation dialog for destructive or important actions. Requires explicit user acknowledgment before proceeding.

Example

Props

AlertDialog.Root

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls dialog visibility (bindable)
`children`	`Snippet`	—	Dialog content

AlertDialog.Trigger

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Trigger content

AlertDialog.Content

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Dialog body content

AlertDialog.Title / AlertDialog.Description

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Text content

AlertDialog.Action / AlertDialog.Cancel

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Button content

Usage

<script>
  import { AlertDialog, Button } from '@chrissnell/chonky-ui';
</script>

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button variant="danger">Delete</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Title>Are you sure?</AlertDialog.Title>
    <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
    <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Action>Delete</AlertDialog.Action>
    </div>
  </AlertDialog.Content>
</AlertDialog.Root>