Dialog Component

The Dialog component creates modal overlays that focus user attention on important content or actions. It features a semi-transparent backdrop, smooth animations, and comprehensive accessibility support.

Key Features

• Flexible Positioning: Top, middle, or bottom screen placement

• Smooth Animations: Polished transitions for opening and closing

• Backdrop Management: Semi-transparent overlay with click-to-close

• Focus Management: Maintains proper keyboard focus states

• Accessibility: Full ARIA support and keyboard navigation

Basic Usage

Create a dialog with a trigger button:

1
<Button id="open-dialog">Open Dialog</Button>
2
<Dialog position="middle" triggerQuery="#open-dialog">
3
    <h2>Welcome to the Dialog Component</h2>
4
    <p>This is a live example of the Dialog component in action.</p>
5
</Dialog>

Dialog Component Props API

Event Handling

The component emits custom events for changes:

1
document.querySelector('dialog-wrapper').addEventListener(DialogEventNames.Open, (event) => {
2
  // Handle open
3
});
4

5
document.querySelector('dialog-wrapper').addEventListener(DialogEventNames.Close, (event) => {
6
  // Handle close
7
});

Accessibility Features

• Escape to close
• Tab trap within dialog
• Return focus on close

Common Applications