Alert Dialog React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Alert Dialog is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AlertDialog from @/components/ui/alert-dialog.

import type { ReactNode } from "react"
import { Trash2 } from "lucide-react"
import { AlertDialog, AlertDialogProvider, confirm } from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

async function deleteListing(id: string) {
  const res = await fetch(`/api/listings/${id}`, { method: "DELETE" })
  if (!res.ok) throw new Error("Could not delete the listing. Try again.")
}

export function DeleteListing({ id }: { id: string }) {
  return (
    <AlertDialog
      trigger={
        <Button variant="soft" tone="danger" leftIcon={<Trash2 />}>
          Delete
        </Button>
      }
      tone="danger"
      title="Delete this listing?"
      description="The listing “Linus city bike” and its 12 messages will be deleted for good."
      confirmLabel="Delete"
      cancelLabel="Cancel"
      confirmLoadingText="Deleting"
      onConfirm={() => deleteListing(id)}
    />
  )
}

// the imperative api: mount the provider once, then await an answer anywhere
export function App({ children }: { children: ReactNode }) {
  return (
    <>
      {children}
      <AlertDialogProvider defaults={{ cancelLabel: "Cancel" }} />
    </>
  )
}

export async function signOutEverywhere() {
  const ok = await confirm({
    title: "Sign out of every device?",
    description: "You stay signed in on this phone only.",
    confirmLabel: "Sign out",
  })
  if (ok) console.log("signed out")
}

Props

• titledefault ""
  ReactNode

  The question, phrased so the buttons answer it. Without one the dialog asks "Are you sure?", so a screen reader always has a title.

• descriptiondefault ""
  ReactNode

  The consequence, in a sentence or two: what will be lost and whether it can be undone.

• confirmLabeldefault "Continue"
  string

  The action. Name what it does ("Delete listing"), not "Yes" or "OK".

• cancelLabeldefault "Cancel"
  string

  The safe way out. It gets the focus when the dialog opens.

• confirmLoadingTextdefault ""
  string

  Next to the spinner while onConfirm runs, like "Deleting". The button reserves room for it, so it never changes width.

• errorTextdefault ""
  ReactNode

  Shown above the buttons when onConfirm rejects or throws. When empty, the error's own message is used if it has one, then "Something went wrong. Try again."

• hideTitledefault false
  boolean

  Keeps the title for screen readers only, for a dialog whose description says it all.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Colors the action and the icon tile. danger for anything destructive (with a trash icon), warning for unsaved changes, success for a positive step; neutral is black in light mode and white in dark mode.

• colordefault ""
  string

  Any CSS color for the action and the icon tile, replacing the tone. Text on the button turns black or white by lightness.

• sizedefault "sm"
  "sm" | "md"

  Max width 400px (sm) or 480px (md) for longer text. On a phone it is always 16px clear of both edges.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape of the card: 0, 12, 16 or 24px. The icon tile and the buttons follow along, and full turns them into a circle and pills.

• aligndefault "start"
  "start" | "center"

  start reads like a desktop dialog with the buttons on the right; center stacks icon and text in the middle and splits the buttons evenly, like an iOS alert.

• defaultOpendefault false
  boolean

  Starts open while uncontrolled. The playground reopens it on change so every setting shows.

• confirmDisableddefault false
  boolean

  Blocks the action, e.g. until the listing's name is typed. Enter in a text field confirms once it is enabled.

• open
  boolean

  Controlled open state; pair it with onOpenChange.

• onOpenChange
  (open: boolean) => void

  Called when it opens or closes, whether by the trigger, Cancel, Escape or a finished confirm.

• trigger
  ReactNode

  The element that opens it, rendered with asChild: a single element that takes a ref, usually a Button.

• icon
  ReactNode

  Shown in a 40px tile above the title. Defaults to a trash can for danger, a triangle for warning and a check for success, and none for the rest; null hides it.

• children
  ReactNode

  Extra content between the text and the buttons, like a type-to-confirm field. It scrolls when the screen is short.

• onConfirm
  () => (void | Promise<unknown>)

  Runs on the action. Return a promise to keep the dialog open with the action loading: resolving closes it, rejecting (or throwing) shows the error and shakes the card. A late result after the dialog closed is ignored.

• onCancel
  () => void

  Called on Cancel or Escape, not when the dialog closes after a confirm.

• container
  HTMLElement | null

  Where the portal mounts. document.body by default.

• classNames
  Partial<Record<"overlay" | "content" | "icon" | "header" | "title" | "description" | "body" | "error" | "footer" | "cancel" | "action", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the card, merged last. The rest of the props (id, aria-*, onOpenAutoFocus...) go to it too.

Parts

FAQ

Used in

More React overlay components