Dialog
A modal dialog overlay built on Radix UI Dialog primitive.
Import
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
DialogClose,
} from "@retents/ui/dialog"Usage Guidelines
When to use
- For focused tasks that require user input, such as editing a profile, creating an item, or configuring settings.
- When the task is short and self-contained — the user can complete it without leaving the current page.
- When the content needs the user's full attention and the background should be dimmed.
When NOT to use
- For destructive confirmations ("Are you sure you want to delete?") — use AlertDialog instead, which prevents dismissal without a decision.
- For supplementary side panel content — use Sheet instead.
- For mobile-friendly bottom panels — use Drawer instead.
- For long forms or multi-step flows — use a dedicated page instead of cramming into a modal.
Accessibility
Dialog traps focus inside the modal and returns focus to the trigger when closed. Always provide a DialogTitle for screen readers.
Preview
Features
- Renders in a portal above all other content
- Includes an overlay with
bg-black/80 - Accessible with keyboard navigation and focus trapping
- Close button included by default
- Supports custom max-width via className