Alert Dialog

A modal that asks the user to confirm or cancel; clicking outside does not dismiss it.

When to use

Use when: An action needs an explicit confirm or cancel, such as deleting something.
Avoid when: The action is easy to undo; do it, and offer undo instead of asking.

Installation

bunx shelf add alert-dialog

The source lands in src/components/ui/alert-dialog.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as AlertDialog from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

<AlertDialog.Root>
  <AlertDialog.Trigger render={<Button variant="destructive" />}>Delete</AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Delete invoice?</AlertDialog.Title>
      <AlertDialog.Description>…</AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Close render={<Button variant="outline" />}>Cancel</AlertDialog.Close>
      <AlertDialog.Close render={<Button variant="destructive" />}>Delete</AlertDialog.Close>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.