Alert Dialog

A modal dialog that interrupts to confirm an action. Use it for destructive or irreversible choices.

Installation

Copy the command below and run it in your terminal.

bunx @sivir/ui add alert-dialog

Usage

Import the AlertDialog components and use them:

import * as AlertDialog from '$lib/sivir/components/alert-dialog';

<AlertDialog.Root>
  <AlertDialog.Trigger>Delete</AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Delete?</AlertDialog.Title>
      <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Exit>Cancel</AlertDialog.Exit>
      <AlertDialog.Confirm>Delete</AlertDialog.Confirm>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

Examples

Common patterns for destructive actions and sign-out flows.

Destructive confirmation

Sign out confirmation