Dialog
A modal window for focused tasks that require the user’s attention.Edit form
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Button, Dialog } from '@advui/core'
<Dialog>
<Dialog.Trigger asChild>
<Button>Edit profile</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Header>
<Dialog.Title>Edit profile</Dialog.Title>
<Dialog.Description>Changes are saved to your account.</Dialog.Description>
</Dialog.Header>
…
<Dialog.Footer>
<Dialog.Close asChild>
<Button variant="outline">Cancel</Button>
</Dialog.Close>
<Button>Save</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog>Examples
Controlled confirmation
Preview
Code
API reference
Dialog
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Open state, when you control it. |
defaultOpen | boolean | false | Open at first, when the dialog manages its state. |
onOpenChange | (open: boolean) => void | — | Called when opened or closed. |
Dialog.Trigger
Opens the dialog. Use `asChild` to render your Button.Dialog.Content
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Max width. |
hideCloseButton | boolean | false | Hide the × button. |
Dialog.Header
Stacks the title and description at the top.Dialog.Footer
A row of actions at the bottom.Dialog.Title
Names the dialog for screen readers.Dialog.Description
Describes the dialog; read with the title.Dialog.Close
Closes the dialog. Use `asChild` to render your Button.| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | Wrap your own Button. |
Accessibility
role="dialog"+aria-modal, labelled byDialog.Titleand described byDialog.Description.- Focus moves into the dialog on open, is trapped while open, and returns to the trigger on close.
- Escape and the overlay close the dialog; the × button has the label “Close”.
- Dialog.Close keeps its child’s visible text as the accessible name.
| Key | Action |
|---|---|
| Tab / Shift+Tab | Cycles focus inside the dialog. |
| Escape | Closes the dialog. |
Responsive behavior
Width is 92% of the viewport up to the size cap, and footer buttons stack vertically below sm.
Platform notes
Web
Rendered in a portal with the page scroll locked.
iOS
Rendered in a native portal above navigation. Consider a Sheet for long forms.
Android
The hardware back button closes the dialog.