Popoveralternative
Use Popover for non-modal contextual contentDialog
Modal overlay for focused user interactions. Use for confirmations, forms, or content requiring full attention.
Setup
import { Dialog } from '@fragments-sdk/ui';Examples
Default
Basic dialog with header, body, and footer
Loading preview...
Confirmation
Destructive action confirmation
Loading preview...
Large
Large dialog for complex content
Loading preview...
Link Trigger + No Initial Focus
Use asChild with a link trigger and disable automatic initial focus when needed
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Dialog content (use Dialog.Content, Dialog.Header, etc.) |
open | boolean | Not set | Controlled open state |
defaultOpen | boolean | false | Default open state (uncontrolled) |
onOpenChange | function | Not set | Called when open state changes |
modal | boolean | true | Whether to render as modal (blocks interaction with rest of page) |
Usage Guidelines
When to use
- Confirming destructive actions (delete, discard changes)
- Collecting focused input (forms, settings)
- Displaying content that requires acknowledgment
- Multi-step workflows that need isolation
When not to use
- Simple tooltips or hints (use Tooltip)
- Contextual menus (use Menu or Popover)
- Non-blocking notifications (use Toast or Alert)
- Simple confirmation that can be inline (use Alert)
Best practices
- Keep dialog content focused on a single task
- Provide clear primary and secondary actions
- Use descriptive title that explains the purpose
- Allow dismissal via backdrop click or close button for non-critical dialogs
- Trap focus within the dialog for accessibility
- Dialog.Trigger and Dialog.Close support asChild for buttons, links, and router link components
Accessibility
- Automatically traps focus within the dialog
- Closes on Escape key press
- Returns focus to trigger element on close
- Uses role="dialog" with proper aria attributes