Feedback
Dialog
A modal panel over a scrim for confirmations and short forms: a serif title, an optional description, any body and right-aligned actions.
Examples
A form dialog and a confirmation
<Dialog open={open} onClose={close} title="Create resolution fix" description="…" actions={<><Button variant="outline">Cancel</Button><Button>Save</Button></>}>
<form>…</form>
</Dialog>
<Dialog open accent size="sm" dismissable={false} onClose={abort} title="Confirm sensitive action" actions={…} />Guidelines
- Closes on the close button, Escape and a click on the scrim; dismissable={false} removes all three for a decision that must be made, such as the agent's confirmation of an outward-facing tool.
- accent draws the amber border and glow for that confirmation. size sm for a yes/no, md for a form, lg for a log or a diff.
- The primary action is last. The dialog locks body scroll while open and labels itself with its title for assistive technology.
Props
| Prop | Type | What it does |
|---|---|---|
| open, onClose | boolean, () => void | Controlled visibility. |
| title, description, children, actions | ReactNode | The parts, top to bottom. |
| size, accent, dismissable | 'sm' | 'md' | 'lg', boolean, boolean | Width, the amber treatment, whether it can be closed without a decision. |