Alert Dialog

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

Show Dialog

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

Installation

pnpm dlx cubix@latest add alert-dialog --base aria

Usage

Import

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

Example

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

Composition

Use the following composition to build an Alert Dialog:

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

Examples

Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

Show Dialog

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

Small

Use the size="sm" prop to make the alert dialog smaller.

Small dialog

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Small dialog
  </AlertDialogTrigger>
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogTitle>Share this document?</AlertDialogTitle>
      <AlertDialogDescription>
        Anyone with the link will be able to view this file.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Share</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Media

Use AlertDialogMedia to add an icon or image above the title.

With media

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    With media
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia>
        <CircleFadingPlusIcon />
      </AlertDialogMedia>
      <AlertDialogTitle>Enable extra features?</AlertDialogTitle>
      <AlertDialogDescription>
        This adds optional tools to your workspace. You can turn them off
        later.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Not now</AlertDialogCancel>
      <AlertDialogAction>Enable</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Small with Media

Combine size="sm" with AlertDialogMedia for a compact dialog with an icon.

Small with media

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Small with media
  </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

Use variant="destructive" on the action when the confirm step cannot be undone.

Delete account

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Delete account
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia className="bg-destructive/10 text-destructive">
        <Trash2Icon />
      </AlertDialogMedia>
      <AlertDialogTitle>Delete your account?</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 variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

RTL

Set dir="rtl" and lang="fa" on the trigger wrapper and on AlertDialogContent so layout, actions, and IRANSans XV follow Persian. The panel is portaled, so it needs those attributes too.

<div dir="rtl" lang="fa">
  <AlertDialog>
    <AlertDialogTrigger render={<Button variant="outline" />}>
      نمایش دیالوگ
    </AlertDialogTrigger>
    <AlertDialogContent dir="rtl" lang="fa">
      <AlertDialogHeader>
        <AlertDialogTitle>آیا کاملاً مطمئن هستید؟</AlertDialogTitle>
        <AlertDialogDescription>
          این کار قابل بازگشت نیست. حساب شما برای همیشه از سرورها حذف
          می‌شود.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>انصراف</AlertDialogCancel>
        <AlertDialogAction>ادامه</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</div>

API Reference

Note: Alert dialogs trap focus and require an explicit choice. Prefer this over a regular Dialog when the user must confirm or cancel.

AlertDialog

The container that wraps the trigger and content and manages open state.

Prop	Type	Default	Description
children	React.ReactNode	-	The trigger and content elements. State is managed internally (uncontrolled).

AlertDialogTrigger

The element that opens the dialog. Use render to merge onto a Button.

Prop	Type	Default	Description
render	React.ReactElement	-	Render the trigger as another element (e.g. a Button).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

AlertDialogContent

The modal panel rendered with a backdrop.

Prop	Type	Default	Description
size	"default" \| "sm"	"default"	Width of the alert dialog panel.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

AlertDialogHeader / AlertDialogMedia / AlertDialogFooter

Layout regions of the dialog content.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

AlertDialogTitle / AlertDialogDescription

The title and supporting text of the dialog.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

AlertDialogAction

The confirm button. Use a destructive variant for irreversible actions.

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"	"default"	Visual style of the confirm button.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

AlertDialogCancel

The dismiss button. Closes the dialog without confirming.

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"	"outline"	Visual style of the cancel button.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).