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/svelte add alert-dialog

Usage

Import the AlertDialog components and use them:

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

<AlertDialog.Root orientation="vertical">
  <AlertDialog.Trigger>Delete</AlertDialog.Trigger>
  <AlertDialog.Content size="lg">
    <AlertDialog.Header>
      <AlertDialog.Title>Delete?</AlertDialog.Title>
      <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Exit>Cancel <Shortcut shortcut="esc" /></AlertDialog.Exit>
      <AlertDialog.Confirm>Delete <Shortcut shortcut="enter" /></AlertDialog.Confirm>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

Examples

Common patterns for destructive actions and sign-out flows.

Destructive confirmation

Sign out confirmation

Anatomy

AlertDialog.Root - Controls alert dialog state.

AlertDialog.Trigger - Opens the alert dialog.

AlertDialog.Content - Renders the dialog surface.

AlertDialog.Header - Groups dialog heading content.

AlertDialog.Title - Renders the dialog title.

AlertDialog.Description - Renders the dialog description.

AlertDialog.Exit - Closes the dialog without confirming.

AlertDialog.Footer - Groups dialog actions.

AlertDialog.Confirm - Confirms and closes the dialog.