Dialog
A Base UI dialog on the chatcn surface. Traps and returns focus, closes on Esc, and grows from the center in 220 ms.
On this page
A destructive confirmation.
Installation
Usage
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/chatcn/dialog"
<Dialog>
<DialogTrigger render={<Button>Delete conversation</Button>} />
<DialogContent size="sm">
<DialogHeader>
<DialogTitle>Delete this conversation?</DialogTitle>
<DialogDescription>Shared links stop working.</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose render={<Button variant="ghost">Cancel</Button>} />
<DialogClose render={<Button variant="solid">Delete conversation</Button>} />
</DialogFooter>
</DialogContent>
</Dialog>Examples
Surface
The dialog surface, rendered open.
Props
| Part | Props | Notes |
|---|---|---|
Dialog | open, defaultOpen, onOpenChange, modal | Base UI Dialog.Root |
DialogContent | size: "sm" | "md" | "lg" | "xl" | "full", showClose | Portal, scrim and popup |
DialogContent | initialFocus, finalFocus | Where focus goes on open and close |
DialogTitle, DialogDescription | Label and describe the dialog | |
DialogTrigger, DialogClose | render | Render your own button |
Keyboard
| Key | Action |
|---|---|
Tab, Shift+Tab | Cycle focus inside the dialog |
Esc | Close and return focus to the trigger |
Accessibility
- Focus moves to the first control inside and returns to the trigger on close.
- Title and description label the dialog. The close button is labeled Close and grows to 44 px on touch.
- In forced colors mode the popup keeps a visible outline.
Motion
- Scrim and popup share 220 ms ease-out in and 160 ms out. The popup grows from 0.96 at the center and leaves at 0.98; it never slides up.
- Opened or closed from the keyboard, nothing animates.
- Under reduced motion only the opacity fade remains.