Faber UI
Components

AlertDialog

A modal dialog used for destructive confirmations.

AlertDialog is built on the Base UI AlertDialog primitive. It forces the user to confirm an action before proceeding, with no dismiss on outside click.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/alert-dialog.json

Usage

typescript
"use client";

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

export default function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline">Show dialog</Button>} />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Examples

Default

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
AlertDialogdata-slot="alert-dialog"AlertDialog.RootBase UI—
AlertDialogTriggerdata-slot="alert-dialog-trigger"AlertDialog.TriggerBase UI—
AlertDialogPortaldata-slot="alert-dialog-portal"AlertDialog.PortalBase UI—
AlertDialogOverlaydata-slot="alert-dialog-overlay"AlertDialog.BackdropBase UI—
AlertDialogContentdata-slot="alert-dialog-content"AlertDialog.PopupBase UI
  • size? = "default""default" | "sm"
AlertDialogHeaderdata-slot="alert-dialog-header"<div>HTML—
AlertDialogFooterdata-slot="alert-dialog-footer"<div>HTML—
AlertDialogMediadata-slot="alert-dialog-media"<div>HTML—
AlertDialogTitledata-slot="alert-dialog-title"AlertDialog.TitleBase UI—
AlertDialogDescriptiondata-slot="alert-dialog-description"AlertDialog.DescriptionBase UI—
AlertDialogActiondata-slot="alert-dialog-action"ButtonFaber UI—
AlertDialogCanceldata-slot="alert-dialog-cancel"AlertDialog.CloseBase UI
  • variant? = "outline"React.ComponentProps<typeof Button>["variant"]
  • size? = "default"React.ComponentProps<typeof Button>["size"]

Changelog

  1. v0.3.0Popover, DropdownMenu, ContextMenu, Menubar, Select, Combobox, HoverCard, Tooltip, Dialog and AlertDialog enter and exit with interruptible transitions on the kit easing tokens, and tw-animate-css is no longer a depen…minor
Full AlertDialog history

Last updated on

On this page