Components

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Playground

Size—size

Title—AlertDialogTitle children

Description—AlertDialogDescription children

Media—AlertDialogMedia

Destructive—AlertDialogAction variant

Usage

AlertDialog wraps an AlertDialogTrigger and an AlertDialogContent. Inside the content, AlertDialogHeader groups AlertDialogTitle and AlertDialogDescription, and AlertDialogFooter pairs AlertDialogCancel with AlertDialogAction — both render as pre-styled Buttons and close the dialog. Unlike Dialog, there is no top-corner close button and clicking the overlay does not dismiss: the user must choose.

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

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Show dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Small

size="sm" on AlertDialogContent keeps the compact width on every viewport, centers the text, and turns the footer into a two-column grid — the OS-prompt pattern for short confirmations.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Show dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
      <AlertDialogDescription>
        Do you want to allow the USB accessory to connect to this device?
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Don't allow</AlertDialogCancel>
      <AlertDialogAction>Allow</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Media

AlertDialogMedia adds an icon or image to the header. At the default size it sits beside the text on larger screens; icons without an explicit size class are scaled to size-8 automatically.

import { ShareNetworkIcon } from "@phosphor-icons/react"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Share project</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia>
        <ShareNetworkIcon />
      </AlertDialogMedia>
      <AlertDialogTitle>Share this project?</AlertDialogTitle>
      <AlertDialogDescription>
        Anyone with the link will be able to view and edit this project.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Share</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Small with media

Combining size="sm" with AlertDialogMedia stacks the icon above the centered text — matching native permission prompts.

import { BluetoothIcon } from "@phosphor-icons/react"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Show dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogMedia>
        <BluetoothIcon />
      </AlertDialogMedia>
      <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
      <AlertDialogDescription>
        Do you want to allow the USB accessory to connect to this device?
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Don't allow</AlertDialogCancel>
      <AlertDialogAction>Allow</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Destructive

AlertDialogAction and AlertDialogCancel accept the Button variant prop. Pair a destructive action with a tinted AlertDialogMedia to signal irreversible operations.

import { TrashIcon } from "@phosphor-icons/react"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete chat</Button>
  </AlertDialogTrigger>
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20">
        <TrashIcon />
      </AlertDialogMedia>
      <AlertDialogTitle>Delete chat?</AlertDialogTitle>
      <AlertDialogDescription>
        This will permanently delete this chat conversation and any
        memories saved during this chat.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

RTL

AlertDialogContent positions itself with logical properties (start-1/2), so passing dir="rtl" mirrors the layout — including the footer order — without extra classes.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">إظهار الحوار</Button>
  </AlertDialogTrigger>
  <AlertDialogContent dir="rtl">
    <AlertDialogHeader>
      <AlertDialogTitle>هل أنت متأكد تمامًا؟</AlertDialogTitle>
      <AlertDialogDescription>
        لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من
        خوادمنا.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>إلغاء</AlertDialogCancel>
      <AlertDialogAction>متابعة</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Accessibility

Built on the Radix AlertDialog primitive: the content renders with role="alertdialog", focus moves to the least destructive action (AlertDialogCancel) on open, and Escape closes while overlay clicks are ignored — interruption is the point. AlertDialogTitle labels the dialog via aria-labelledby and is required; AlertDialogDescription wires up aria-describedby. Reserve the component for confirmations that block the task — for everything else, use Dialog.

<AlertDialogContent>
  <AlertDialogHeader>
    <AlertDialogTitle>Discard draft?</AlertDialogTitle>
    <AlertDialogDescription>
      Your changes will be lost. This cannot be undone.
    </AlertDialogDescription>
  </AlertDialogHeader>
  {/* Cancel receives initial focus — the safe default */}
  <AlertDialogFooter>
    <AlertDialogCancel>Keep editing</AlertDialogCancel>
    <AlertDialogAction variant="destructive">Discard</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogContent>

API Reference

Twelve parts re-export the Radix AlertDialog primitive with Westy styling: AlertDialog as the stateful root, AlertDialogTrigger as a behavior wrapper (use asChild to keep your own markup), AlertDialogPortal and AlertDialogOverlay handled automatically by AlertDialogContent, the AlertDialogHeader / AlertDialogMedia / AlertDialogTitle / AlertDialogDescription / AlertDialogFooter layout parts, and AlertDialogCancel / AlertDialogAction as ready-made Buttons. All accept their underlying element props.

Component	Prop	Default
AlertDialog	open?: boolean, onOpenChange?: (open: boolean) => void	—
AlertDialogContent	size?: "default" \| "sm"	"default"
AlertDialogAction	variant?: Button variant, size?: Button size	"default"
AlertDialogCancel	variant?: Button variant, size?: Button size	"outline"
AlertDialogTrigger	asChild?: boolean	false

<AlertDialog data-slot="alert-dialog" />
<AlertDialogTrigger data-slot="alert-dialog-trigger" />
<AlertDialogContent data-slot="alert-dialog-content" data-size data-open data-closed />
<AlertDialogOverlay data-slot="alert-dialog-overlay" />
<AlertDialogHeader data-slot="alert-dialog-header" />
<AlertDialogMedia data-slot="alert-dialog-media" />
<AlertDialogTitle data-slot="alert-dialog-title" />
<AlertDialogDescription data-slot="alert-dialog-description" />
<AlertDialogFooter data-slot="alert-dialog-footer" />
<AlertDialogAction data-slot="alert-dialog-action" />
<AlertDialogCancel data-slot="alert-dialog-cancel" />

Tokens used

12 design tokens consumed by the Alert Dialog component.

--popover
Popover
bg-popover
--popover-foreground
Popover Foreground
text-popover-foreground
--foreground
Foreground
ring-foreground/10*:[a]:hover:text-foreground
--muted
Muted
bg-muted
--muted-foreground
Muted Foreground
text-muted-foreground
--font-heading
GT Alpina Condensed
font-heading
--text-lg
Text Large (18px)
text-lg
--text-sm
Text Small (14px)
text-sm
--font-weight-medium
Font weight Medium (500)
font-medium
--radius-xl
Radius 1.4× (14px)
rounded-xl
--radius-md
Radius 0.8× (8px)
rounded-md
--spacing
Spacing unit (4px)
p-6gap-6gap-2gap-1.5size-16size-8mb-2