Alert Dialog

Alert Dialogs are used to display critical information that requires user confirmation or action before proceeding. They interrupt the user's workflow to ensure important messages are seen and acted upon.

This Alert Dialog component is built with React Aria Components and styled using Tailwind CSS, providing a highly accessible and customizable experience.

Installation

Install the component using the Tailgrids CLI.

npx @tailgrids/cli add alert-dialog

Anatomy

Import the component and its sub-components.

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

export default () => (
  <AlertDialog>
    <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Delete</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
);

Examples

Basic

A simple confirmation dialog for common user actions.

Destructive

Use a destructive style for actions that result in data loss or permanent changes.

Custom Actions

Customize the button labels and styles to match the specific context of the alert.

API Reference

AlertDialog

Root component that manages the dialog state.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The trigger and content elements
`isOpen`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	-	Uncontrolled default open state
`onOpenChange`	`(isOpen: boolean) => void`	-	Called when the open state changes

AlertDialogTrigger

The button element that opens the dialog when pressed.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The trigger label or element
`className`	`string`	-	Additional CSS classes

AlertDialogContent

The main dialog panel. Wraps Modal and Dialog from react-aria-components.

Prop	Type	Default	Description
`children`	`React.ReactNode` \| `(opts: { close: () => void }) => React.ReactNode`	-	Content of the dialog. Supports render props for `close()` access
`overlayClassName`	`string`	-	Additional CSS classes for the overlay backdrop
`className`	`string`	-	Additional CSS classes for the dialog panel

AlertDialogHeader

A semantic container for the title and description at the top of the dialog.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Header content
`className`	`string`	-	Additional CSS classes

AlertDialogTitle

The dialog title. Uses react-aria's Heading with slot="title" for proper ARIA labelling.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Title text
`className`	`string`	-	Additional CSS classes

AlertDialogDescription

A paragraph for supplementary text that describes the alert's purpose.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Description text
`className`	`string`	-	Additional CSS classes

AlertDialogFooter

An action bar at the bottom of the dialog for buttons and actions.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Footer content (buttons, links, etc.)
`className`	`string`	-	Additional CSS classes

AlertDialogAction

The primary action button. Styled as a primary button by default.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Action button label or content
`className`	`string`	-	Additional CSS classes

AlertDialogCancel

A button with slot="close" that automatically closes the dialog without taking action.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Cancel button label or content
`className`	`string`	-	Additional CSS classes

See Modal reference for more information.

Accessibility

Role: Uses role="alertdialog" to ensure screen readers treat it as an interruptive modal.
Focus Management: Automatically handles focus entrapment and returns focus to the trigger upon closing.
Keyboard Navigation: Supports Escape key to close the dialog and Enter to trigger actions.
Aria Labels: Titles and descriptions are automatically linked to the dialog container for context.

Alert Dialog

CLI

Manual

On this page