Alert

A macOS 27 alert: a narrow glass panel with a bold title, message and capsule buttons.

@cupertinoui/alert-dialogBase UI Alert Dialog Registry JSON

"use client"

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

export default function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="secondary" />}>Restart…</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure you want to restart your computer now?</AlertDialogTitle>
          <AlertDialogDescription>
            If you do nothing, the computer will restart automatically in 60 seconds.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Restart</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/alert-dialog

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<AlertDialog>
  <AlertDialogTrigger>Restart…</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Restart your computer now?</AlertDialogTitle>
      <AlertDialogDescription>Unsaved changes will be lost.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Restart</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Stacked buttons

With three buttons or long labels, stack them. An app icon can go above the title.

"use client"

import { FileTextIcon } from "lucide-react"

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

export default function AlertDialogStacked() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="secondary" />}>Close Draft…</AlertDialogTrigger>
      <AlertDialogContent layout="stacked">
        <AlertDialogHeader>
          <AlertDialogMedia>
            <FileTextIcon className="text-mac-accent" strokeWidth={1.25} />
          </AlertDialogMedia>
          <AlertDialogTitle>Save this message as a draft?</AlertDialogTitle>
          <AlertDialogDescription>
            This message has not been sent and contains unsaved changes. You can save it as a draft to work on later.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="tinted" className="bg-mac-red/20 text-mac-red">
            Don’t Save
          </AlertDialogAction>
          <AlertDialogAction>Save</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Destructive

"use client"

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

export default function AlertDialogDestructive() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive" />}>Empty Trash…</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure you want to permanently erase the items in the Trash?</AlertDialogTitle>
          <AlertDialogDescription>You can’t undo this action.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Empty Trash</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

API Reference

Every part forwards the props of the underlying Base UI Alert Dialog part. The props below are the ones CupertinoUI adds or changes.

AlertDialogContent

Prop	Type	Description
`layout`	`"side-by-side" \| "stacked"` Default: `"side-by-side"`	Buttons in a row, or full-width and stacked.
`size`	`"default" \| "sm"` Default: `"default"`	260 or 240pt wide.
`className`	`string`	Extra classes, merged with the component's own.

AlertDialogAction / AlertDialogCancel

Prop	Type	Description
`variant`	`Button variant` Default: `"default" / "secondary"`	The button style.
`size`	`Button size` Default: `"lg"`	Alerts use large capsule buttons.

AlertDialogMedia

The app icon above the title.

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.