Components
Dialog
A modal dialog on the native `<dialog>` element. Focus moves in, Escape closes it, and focus returns to the trigger. Build your own modal on the same behaviour with `DialogContentBase`.
Client componentUses state or handlers, so it starts with "use client".
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@glob-ui/dialog"Preview
Examples
Controlled
Controlled with open and onOpenChange. closeOnOutsideClick={false} keeps the dialog open on a backdrop click.
Last choice: none yet
Sizes
size is sm, md or lg.
API
Props are generated from the TypeScript types in the package source.
Dialog
Prop
Type
DialogTrigger
Prop
Type
DialogContent
Prop
Type
DialogClose
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| Enter, Space on the trigger | Opens the dialog. Focus moves to the first focusable element inside. |
| Tab, Shift+Tab | Cycle inside the dialog. Background content is inert. |
| Escape | Closes the dialog and returns focus to the trigger. |
| Backdrop click | Closes the dialog, unless closeOnOutsideClick is false. |
ARIA. The dialog is named by DialogTitle (aria-labelledby) and described by DialogDescription (aria-describedby). Always include a title.