Dialog

Basic Dialog

Dialog with Custom Actions

Installation

The Dialog component is a versatile and accessible modal dialog for displaying alerts, confirmations, or custom modal content.

Quickly add the component using:

npx axionjs-ui add dialog

Props

The Dialog component and its subcomponents (DialogTrigger, DialogContent, DialogHeader, etc.) are designed for flexibility. Here’s a breakdown of their props:

Dialog Props

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

Dialog Subcomponent Props

Prop	Type	Default
`DialogTrigger`	`React.ReactNode`	-
`DialogContent`	`React.ReactNode`	-
`DialogHeader`	`React.ReactNode`	-
`DialogFooter`	`React.ReactNode`	-
`DialogTitle`	`string \| React.ReactNode`	-
`DialogDescription`	`string \| React.ReactNode`	-

Features

The Dialog component provides the following features:

Customizable Layout:
- Combine triggers, headers, descriptions, and footers to create unique dialogs.
Built-In Accessibility:
- Fully ARIA-compliant with roles, labels, and focus management.
Lightweight and Performant:
- Built with Radix Primitives for minimal overhead and responsive design.
Animations:
- Includes smooth open/close animations for a polished user experience.

Use Cases

The Dialog component is ideal for:

Alerts:
- Display important information that requires user acknowledgment.
Confirmations:
- Ask users to confirm critical actions like deletions.
Custom Modals:
- Create complex modals for forms, walkthroughs, or interactive content.

Accessibility

The Dialog component is built with accessibility as a priority:

Focus Management:
- Automatically focuses the dialog content when opened and restores focus when closed.
ARIA Attributes:
- Uses role="dialog" and connects the title and description via aria-labelledby and aria-describedby.
Keyboard Navigation:
- Fully keyboard navigable with Tab and Escape support.

The Dialog component is a powerful tool for creating accessible and customizable modals in modern web applications. With built-in animations, focus management, and flexible styling, it’s an essential component for any UI.