Dialog

Dialog

Dialog is a modal overlay service for displaying content in focused panels with customizable positioning and backdrop behavior.

Visual Specifications

Property	Value
Default Width	500-600px (customizable)
Max Width	90vw (mobile)
Border Radius	8-12px
Box Shadow	High elevation
Backdrop	Semi-transparent black
Z-index	1000+

Position Options

Center Top Left Top Right Bottom Left Bottom Right Bottom Center

Centered in viewport (default position)

Top-left corner of viewport

Top-right corner of viewport

Bottom-left corner of viewport

Bottom-right corner of viewport

Bottom-center, sheet style

Dialog States

State	Behavior
Opening	Fade in, scale up animation
Open	Fully visible, backdrop shown
Closing	Fade out, scale down animation
Closed	Removed from DOM

Usage Patterns

Pattern	Description
Modal	Blocks interaction with underlying content
Non-modal	Allows interaction with underlying content
Alert	Simple message with confirmation
Form	Collects user input in focused context
Detail	Shows additional information on demand

Backdrop Behaviors

Behavior	Usage
Static	Backdrop visible, click does nothing
Closeable	Click backdrop to close dialog
None	No backdrop overlay

Usage Guidance

When to use

• Focused user attention required
• Collecting input in context
• Displaying important information
• Confirming critical actions
• Complex workflows

Best practices

✅ Do	❌ Don’t
Provide clear close options	Trap users without exit
Use for focused interactions	Display non-critical info
Consider mobile size	Make panels too large
Handle ESC key	Disable keyboard closing
Show clear title	Leave content unlabeled
Manage focus properly	Ignore accessibility

Accessibility

• Focus trapped within dialog
• Focus returns to trigger on close
• Accessibility (dialog role)
• Accessibility (labels and descriptions)
• ESC key to close
• Screen reader announcements