Alert Dialog

The React Alert Dialog component shows a modal that asks users to confirm an important action. It is used for actions like deleting data, logging out, or making permanent changes.

It blocks the screen until the user takes action, such as confirming or canceling. For example, users must confirm before deleting an account or removing a file.

Built with React Aria Components and styled using Tailwind CSS. It supports keyboard navigation, focus management, and accessible modal interactions.

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

Focus management: The alert dialog keeps focus within it while open and returns focus to the trigger when it closes.
Keyboard support: Users can press the Escape key to close the dialog and press Enter to confirm the primary action.
Trigger behavior: Users can open the alert dialog using a trigger and interact with actions using the mouse or keyboard.
Screen reader support: Screen readers announce the dialog as an alert, so users understand that immediate action is required.
ARIA labeling: Use AlertDialogTitle and AlertDialogDescription to describe the purpose and impact of the action clearly.
Action clarity: Provide clear labels for actions like confirm and cancel so users understand the outcome before proceeding.

Alert Dialog

CLI

Manual

On this page