Dialog

Modal dialog component with backdrop and focus management.

Installation

1. Install the package

npm install d12-ui

2. Import the components

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "d12-ui"

3. Basic Usage

Examples

Alert Dialog

Integration Tips

State Management

Use useState to control the dialog's open state. This gives you full control over when the dialog opens and closes.

Form Integration

Combine with form libraries like React Hook Form for complex forms inside dialogs.

Accessibility

The dialog automatically manages focus and provides proper ARIA attributes for screen readers.