Dialog
A centered modal surface for forms, setup steps, announcements, and blocking detail panels.
Use Dialog for content surfaces that need focus trapping and a centered modal frame. Use AlertDialog for irreversible confirms and destructive confirmation flows.
import {
Dialog,
DialogBody,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "raft-ui";
<Dialog>
<DialogTrigger />
<DialogContent>
<DialogHeader>
<div>
<DialogTitle />
<DialogDescription />
</div>
<DialogClose />
</DialogHeader>
<DialogBody />
<DialogFooter>
<DialogClose />
</DialogFooter>
</DialogContent>
</Dialog>...propsBase UI Dialog.Root.Props
Owns open state, focus trap, Escape close, outside press, and modal behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Dialog.Root.Props | — | Owns open state, focus trap, Escape close, outside press, and modal behavior. |
...propsBase UI Dialog.Trigger.Props
Opens the dialog. Compose a Button through render when the trigger is visible.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Dialog.Trigger.Props | — | Opens the dialog. Compose a Button through render when the trigger is visible. |
containerHTMLElement | RefObject | null
Custom portal container for framed previews or contained overlays.
...propsBase UI Dialog.Portal.Props
Portals the dialog to the body or a custom container.
| Prop | Type | Default | Description |
|---|---|---|---|
container | HTMLElement | RefObject | null | — | Custom portal container for framed previews or contained overlays. |
...props | Base UI Dialog.Portal.Props | — | Portals the dialog to the body or a custom container. |
...propsBase UI Dialog.Backdrop.Props
Backdrop behind the dialog panel while it is open.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Dialog.Backdrop.Props | — | Backdrop behind the dialog panel while it is open. |
overlayfalse | DialogOverlayProps
Pass false for framed previews; otherwise renders the themed backdrop.
...propsBase UI Dialog.Popup.Props
Portaled centered dialog surface. Use className for width and one-off layouts.
| Prop | Type | Default | Description |
|---|---|---|---|
overlay | false | DialogOverlayProps | — | Pass false for framed previews; otherwise renders the themed backdrop. |
...props | Base UI Dialog.Popup.Props | — | Portaled centered dialog surface. Use className for width and one-off layouts. |
...propsComponentPropsWithRef<"div">
Header region. Defaults to title/action columns.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"div"> | — | Header region. Defaults to title/action columns. |
...propsComponentPropsWithRef<"div">
Main content region between header and footer.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"div"> | — | Main content region between header and footer. |
...propsBase UI Dialog.Title.Props
Accessible dialog title.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Dialog.Title.Props | — | Accessible dialog title. |
...propsBase UI Dialog.Description.Props
Accessible supporting description.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Dialog.Description.Props | — | Accessible supporting description. |
variantButton variant
Button styling when using the default themed icon button.
sizeButton size
Button size when using the default themed icon button.
...propsBase UI Dialog.Close.Props
Closes the dialog. Defaults to a themed icon button; pass render for footer actions.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | Button variant | — | Button styling when using the default themed icon button. |
size | Button size | — | Button size when using the default themed icon button. |
...props | Base UI Dialog.Close.Props | — | Closes the dialog. Defaults to a themed icon button; pass render for footer actions. |