0

Alert Dialog

PreviousNext

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

import {
  AlertDialog,
  AlertDialogAction,

Installation

bunx --bun shadcn@latest add @ondo-ui/alert-dialog

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-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>

Composition

Use the following composition to build an AlertDialog:

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.

import {
  AlertDialog,
  AlertDialogAction,

Small

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

import {
  AlertDialog,
  AlertDialogAction,

Media

Use the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.

import { IconCirclePlus } from "@tabler/icons-react"

import {

Small with Media

Use the size="sm" prop to make the alert dialog smaller and the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.

import { IconBluetooth } from "@tabler/icons-react"

import {

Destructive

Use the AlertDialogAction component to add a destructive action button to the alert dialog.

import { IconTrash } from "@tabler/icons-react"

import {

API reference

The component wraps Base UI AlertDialog and accepts all of its props.

size

Use the size prop on the AlertDialogContent component to control the size of the alert dialog. It accepts the following values:

PropTypeDefault
size"default" | "sm""default"