Dialog
BaselineFocus attention on a short task without leaving the page.
Example
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from 'panel-ui-kit/dialog';import { Button } from 'panel-ui-kit/button'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Dialog> <DialogTrigger asChild><Button>Edit preferences</Button></DialogTrigger> <DialogContent closeLabel="Close dialog"> <DialogHeader> <DialogTitle>Your preferences</DialogTitle> <DialogDescription>Choose what works for you.</DialogDescription> </DialogHeader> <DialogFooter> <DialogClose asChild><Button>Done</Button></DialogClose> </DialogFooter> </DialogContent> </Dialog> </PanelUiTheme> );}When to use
Supply a title, useful description and a clear close label. Keep the task small and let people cancel.
Keyboard
Focus moves into the dialog. Tab stays inside. Escape closes it and returns focus to the trigger.
Properties
| Property | Values | Default |
|---|---|---|
open | boolean | Caller owned |
onOpenChange | (open: boolean) => void | — |
closeLabel | Nonempty string on Content | Required |
motion | full · reduced · off · object | Inherited |