Alert Dialog

A versatile and accessible alert dialog component for confirming actions or displaying critical messages.

Default Alert Dialog

Destructive Alert Dialog

Installation

The AlertDialog component is perfect for creating accessible modal dialogs for user confirmations or critical alerts.

Quickly add the component using:

npx axionjs-ui add alert-dialog

Props

The AlertDialog component and its subcomponents offer extensive customization. Here’s a detailed breakdown of their props:

AlertDialog Props

Prop	Type	Default
`children`	`React.ReactNode`	-

Subcomponent Props

Prop	Type	Default
`AlertDialogTrigger`	`React.ReactNode`	-
`AlertDialogContent`	`React.ReactNode`	-
`AlertDialogHeader`	`React.ReactNode`	-
`AlertDialogFooter`	`React.ReactNode`	-
`AlertDialogTitle`	`string \| React.ReactNode`	-
`AlertDialogDescription`	`string \| React.ReactNode`	-
`AlertDialogAction`	`React.ReactNode`	-
`AlertDialogCancel`	`React.ReactNode`	-

Features

The AlertDialog component provides the following features:

Dynamic Variants:
- Use for confirmations, critical alerts, or informational dialogs.
Built-In Accessibility:
- Fully compliant with ARIA roles and attributes.
Flexible Layout:
- Combine triggers, headers, descriptions, and footers to create custom dialogs.
Interactive Behavior:
- Handles focus management, keyboard navigation, and dismissable overlays.

Use Cases

The AlertDialog component is ideal for:

User Confirmations:
- Confirm critical actions like deletions, updates, or submissions.
Error Notifications:
- Alert users of issues requiring immediate attention.
Custom Modals:
- Build feature-rich modal dialogs with accessible defaults.

Accessibility

The AlertDialog component is designed to meet the highest accessibility standards:

ARIA Roles:
- Uses role="alertdialog" to signal critical content.
Focus Management:
- Automatically manages focus when the dialog is opened or closed.
Keyboard Navigation:
- Supports Tab and Escape keys for easy interaction.

The AlertDialog component is a powerful and accessible tool for creating dialogs that require user interaction. Its flexibility, built-in accessibility, and modern design make it an essential component for any application.