Alert Dialog

Demos

A confirmation before an appointment is cancelled.

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@workspace/ui/components/alert-dialog"
import { Button } from "@workspace/ui/components/button"

export function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>
        Cancel appointment
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Cancel this appointment?</AlertDialogTitle>
          <AlertDialogDescription>
            Your slot on 14 November at 08:30 will be released. You can book a
            new one at any time.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Keep it</AlertDialogCancel>
          <AlertDialogAction>Cancel appointment</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Usage

Use an alert dialog before an action that is hard to undo, such as deleting a report or cancelling an appointment. Unlike a Dialog, it does not close when the reader clicks the backdrop. They must choose an action.

Import it from @workspace/ui/components/alert-dialog.

Anatomy

AlertDialog — Holds the open state.
AlertDialogTrigger — Opens the dialog. Pass a button through render.
AlertDialogContent — The window and its backdrop.
AlertDialogHeader — Stacks the media, title, and description.
AlertDialogMedia — An optional icon tile beside the title.
AlertDialogTitle — The question. Always include it.
AlertDialogDescription — What will happen if the reader goes ahead.
AlertDialogFooter — The actions. Stacks on small screens.
AlertDialogCancel — Closes the dialog. An outline button by default.
AlertDialogAction — The action. A plain Button, so close the dialog yourself after it runs, or wrap the work in a controlled open state.

Notes

Write the title as a question and name the thing: "Delete this report?", not "Are you sure?".
Name the action button with a verb, such as "Delete". Avoid "OK" and "Yes".
Focus starts on the first button, which is the cancel button, so Enter does not run the action by accident.

Examples

Destructive

Add AlertDialogMedia for an icon and pass variant="destructive" to the action.

"use client"

import { Trash2Icon } from "lucide-react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@workspace/ui/components/alert-dialog"
import { Button } from "@workspace/ui/components/button"

export function AlertDialogDestructive() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive" />}>
        Delete report
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogMedia className="bg-destructive/10 text-destructive">
            <Trash2Icon />
          </AlertDialogMedia>
          <AlertDialogTitle>Delete this report?</AlertDialogTitle>
          <AlertDialogDescription>
            The October report and its 42 results will be removed for good.
            Your doctor will lose access too.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Small

size="sm" narrows the dialog and places the two buttons side by side.

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@workspace/ui/components/alert-dialog"
import { Button } from "@workspace/ui/components/button"

export function AlertDialogSmall() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>
        Sign out
      </AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogTitle>Sign out?</AlertDialogTitle>
          <AlertDialogDescription>
            You will need your code to sign back in.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Stay</AlertDialogCancel>
          <AlertDialogAction>Sign out</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

AlertDialog

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Open on first render.
`open`	`boolean`	—	Open state when controlled.
`onOpenChange`	`(open) => void`	—	Called when the dialog opens or closes.

AlertDialogContent

Prop	Type	Default	Description
`size`	`"default" or "sm"`	`default`	Width of the dialog. `sm` also puts the footer in two columns.

AlertDialogAction and AlertDialogCancel

Both take the Button variant and size props. AlertDialogCancel defaults to variant="outline".