Dialog

Overlay

Modal dialog with focus trap, backdrop click handling, scroll locking, and nested dialog support

Dialog

A versatile Dialog component with accessible focus management, scrollable content, variants, sizes and a flexible header/body/footer layout.

Basic usage

Use open and onOpenChange to control the Dialog. Combine with DialogHeader, DialogBody and DialogFooter to structure the content.

Variants

Use the variant prop to match the semantic meaning of the Dialog. This controls border, header decoration and actions.

Sizes

Change the size prop to control the Dialog width. Use smaller sizes for confirmation dialogs and larger ones for forms or complex content.

Header, body & footer layout

Use the composable layout components to build structured dialogs with titles, descriptions and sticky footers.

Usage Guidelines

When to Use

  • Confirmations
  • Forms needing attention
  • Decision prompts

Accessibility

  • Focus trapped inside
  • Escape to close
  • aria-modal announced

Performance

  • Portal rendering
  • Lazy content mounting

Common Mistakes

  • Using for non-critical info
  • Dialogs that are too complex

Frequently Asked Questions

Yes, Dialog implements proper focus trapping within the modal.
Yes, Dialog supports nested dialogs with proper z-index and focus management.

View on GitHub

See the full source code on GitHub

Related Components

View all
Command

Command palette (⌘K) with fuzzy search, grouped commands, keyboard shortcuts, and recent history

ContextMenu

Right-click context menu with nested menus, checkboxes, radio items, and keyboard shortcuts display

Drawer

Side panel with directional sliding, scroll locking, and responsive mobile-first design

Dropdown

Dropdown menu with collision detection, sub-menus, dividers, and keyboard navigation

Previous

DatePicker

Next

Drawer