Dialog
A modal window that overlays the page to display focused content or capture user input.
Installation
pnpm dlx stera-ui@latest add dialog
Composition
Use the following composition to build a Dialog:
Dialog
├── DialogTrigger
└── DialogContent
├── DialogHeader
│ ├── DialogTitle
│ └── DialogDescription
└── DialogFooterExamples
Confirmation Dialog
Use DialogClose with a custom button to create cancel/confirm action pairs.
Scrollable Content
Set scroll="content" on DialogPopup and scroll on DialogContent to let the body scroll while the header and footer remain sticky.
API Reference
Built on Base UI's Dialog primitive — see the full API reference there.
DialogPopup
| Prop | Type | Default |
|---|---|---|
scroll | false | "content" | false |
showCloseButton | boolean | true |
initialFocus | boolean | true |
DialogFooter
| Prop | Type | Default |
|---|---|---|
showCloseButton | boolean | false |
DialogTrigger
| Prop | Type | Description |
|---|---|---|
render | ReactElement | Render prop for the trigger element |
DialogClose
| Prop | Type | Description |
|---|---|---|
render | ReactElement | Render prop for the close element |