Components / Overlays
Overlays
Modal dialogs, side sheets, dropdown menus, tooltips, and popovers. All built on Radix UI primitives with full keyboard navigation, focus trapping, and screen reader support.
Live Demo
Overlay Patterns
| Pattern | ||
|---|---|---|
| Dialog | Button click | Confirmations, critical decisions, focused tasks that require completion before continuing |
| Sheet | Button click | Secondary panels, filters, settings, navigation drawers on mobile |
| Dropdown Menu | Button/icon click | Contextual actions for an item — edit, copy, delete, share |
| Tooltip | Hover / focus | Brief labels for icon-only buttons and technical terms |
| Popover | Click | Rich contextual content that needs more space than a tooltip |
Usage Guidelines
✓ Escape key always closes
All overlays close on Escape. This is provided by Radix UI primitives and should never be disabled.
✓ Focus returns to trigger
When an overlay closes, focus returns to the element that opened it. Radix handles this automatically.
✗ Modal for non-critical tasks
Dialogs interrupt the user's flow. Use sheets or popovers for non-critical secondary content.
✗ Nested dialogs
Never open a dialog from inside a dialog. Flatten the flow or redesign the interaction.