Dialog
Varo exposes Dialog through composable parts: VDialogRoot, VDialogTrigger, VDialogOverlay, VDialogContent, and VDialogClose.
Demo
Dialog Cross-platform Example and Preview
DialogBrowser dialog flow
When to use
- Modal confirmations or supplemental content
- Downstream wrapper composition in an internal design system
- Shared overlay click and escape close behavior across teams
Anatomy
Dialog is a composed parts model, not one monolithic widget.
VDialogRootowns open state and controlled behavior.VDialogTriggeropens or toggles the dialog.VDialogOverlayhandles the backdrop and click-to-close behavior.VDialogContentrenders modal content.VDialogCloseperforms explicit close actions.
Mini-program guidance
For mini-programs, it is usually better to wrap @varo-ui/headless into an internal modal component because platform container differences tend to be larger around overlays and portals. The tabbed example focuses on the shared interaction contract and parts composition.
Root Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | undefined | Controlled open state |
defaultOpen | boolean | false | Uncontrolled initial state |
disabled | boolean | undefined | undefined | Blocks open and close behavior |
Root Events
| Event | Payload | Description |
|---|---|---|
update:open | boolean | Sync controlled open state |
openChange | boolean | Fires when open state changes |
Parts
| Part | Purpose |
|---|---|
VDialogTrigger | Opens or toggles the dialog |
VDialogOverlay | Overlay layer that can close on click |
VDialogContent | Modal content container |
VDialogClose | Explicit close action |
Behavior
- supports both controlled and uncontrolled mode
- supports overlay click close
- supports
Escapeclose - the parts model is a better base for an enterprise modal API than a single rigid component
Composition Guidance
Recommended composition
- Decide first whether open state belongs to the parent before opting into controlled mode.
- For more complex dialogs, create a stricter wrapper with header, body, and footer slots instead of repeating raw part assembly everywhere.
- Keep platform-specific portal decisions in the adapter layer, not in the shared interaction model.
Accessibility and Close Contracts
- overlay click and
Escapeclose follow the same behavioral contract - explicit closing should go through
VDialogClose - in controlled mode, the parent still decides whether state actually changes