Sivir UI
79

Alert Dialog

Asks the user to confirm or cancel before a destructive or irreversible action. Clicking outside does not close it.

<script lang="ts">
    import Trash from '@lucide/svelte/icons/trash-2';
    import * as AlertDialog from '@sivir-ui/svelte/components/alert-dialog';
    import Shortcut from '@sivir-ui/svelte/components/shortcut';
</script>

<AlertDialog.Root error>
    <AlertDialog.Trigger variant="destructive">
        <Trash size={14} />
        Delete workspace
    </AlertDialog.Trigger>
    <AlertDialog.Content size="lg">
        <AlertDialog.Header>
            <div class="flex items-center gap-2.5">
                <Trash size={18} class="text-[var(--color-error)]" />
                <AlertDialog.Title>Delete this workspace?</AlertDialog.Title>
            </div>
            <AlertDialog.Description>
                All projects, comments, and exports will be removed. This action 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>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add alert-dialog

Usage

Set error on AlertDialog.Root to give AlertDialog.Confirm the destructive style and turn supported browser chrome red while the dialog is open.

import * as AlertDialog from '@sivir-ui/svelte/components/alert-dialog';
import Shortcut from '@sivir-ui/svelte/components/shortcut';

<AlertDialog.Root error>
  <AlertDialog.Trigger>Delete project</AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Delete project?</AlertDialog.Title>
      <AlertDialog.Description>Its deployments and history will be removed. 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

Destructive confirmation

<script lang="ts">
    import * as AlertDialog from '@sivir-ui/svelte/components/alert-dialog';
    import Shortcut from '@sivir-ui/svelte/components/shortcut';
</script>

<div class="grid place-items-center">
    <AlertDialog.Root error>
        <AlertDialog.Trigger variant="destructive">Discard changes</AlertDialog.Trigger>
        <AlertDialog.Content size="lg">
            <AlertDialog.Header>
                <AlertDialog.Title>Discard unsaved changes?</AlertDialog.Title>
                <AlertDialog.Description>
                    You have 3 unsaved changes that will be lost if you leave this page.
                </AlertDialog.Description>
            </AlertDialog.Header>
            <AlertDialog.Footer>
                <AlertDialog.Exit>
                    Keep editing
                    <Shortcut shortcut="esc" />
                </AlertDialog.Exit>
                <AlertDialog.Confirm>
                    Discard
                    <Shortcut shortcut="enter" />
                </AlertDialog.Confirm>
            </AlertDialog.Footer>
        </AlertDialog.Content>
    </AlertDialog.Root>
</div>

Sign out confirmation

<script lang="ts">
    import * as AlertDialog from '@sivir-ui/svelte/components/alert-dialog';
    import Shortcut from '@sivir-ui/svelte/components/shortcut';
</script>

<div class="grid place-items-center">
    <AlertDialog.Root>
        <AlertDialog.Trigger variant="outline">Sign out</AlertDialog.Trigger>
        <AlertDialog.Content size="lg">
            <AlertDialog.Header>
                <AlertDialog.Title>Sign out?</AlertDialog.Title>
                <AlertDialog.Description>
                    You'll need to sign in again to resume your session.
                </AlertDialog.Description>
            </AlertDialog.Header>
            <AlertDialog.Footer>
                <AlertDialog.Exit>
                    Stay
                    <Shortcut shortcut="esc" />
                </AlertDialog.Exit>
                <AlertDialog.Confirm>
                    Sign out
                    <Shortcut shortcut="enter" />
                </AlertDialog.Confirm>
            </AlertDialog.Footer>
        </AlertDialog.Content>
    </AlertDialog.Root>
</div>

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.