Components
VersionLoading…
Dialog
Accessible modal confirmation for actions that stop the page.
Use Dialog for high-impact actions that require an explicit decision. It traps focus, closes from Escape or the scrim, restores focus to the opener, and keeps the title and actions fixed while a long body scrolls.
Usage
<Dialog
open={open}
onClose={() => setOpen(false)}
title="Revoke Codazen access"
tone="danger"
confirmLabel="Revoke access"
onConfirm={revokeAccess}
confirmDisabled={typedName !== organization.name}
>
<Input label={`Type ${organization.name} to confirm`} />
</Dialog>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
open | boolean | — | Controlled visibility |
onClose | () => void | — | Close button, cancel, scrim, and Escape |
title | string | — | Required accessible name |
tone | default | danger | default | Danger adds a High impact marker and danger confirm button |
size | sm | md | lg | md | Max width 420 / 520 / 720px |
confirmLabel | string | — | Names the action; avoid generic “OK” copy |
onConfirm | () => void | Promise<void> | — | A promise enables the loading state and blocks re-entry |
confirmDisabled | boolean | false | Lets the host gate confirmation |
badge | ReactNode | — | Optional scope marker beside the title |
children | ReactNode | — | Dialog body |
The host remains responsible for the write. While a destructive write is in flight, Dialog disables its actions and ignores confirm re-entry.