Dialog

Dialog — Prism component.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

When to use

• Use it when A focused, interruptive task or confirmation that must be resolved before continuing.
• Reach for something else when Non-blocking messages (use Alert/toast) or large workflows (use a page).

Accessibility

Focus is trapped and returned to the trigger on close, Esc dismisses, and the backdrop is inert. Title wires aria-labelledby; variant="danger" still announces as a dialog.

Import

const { Dialog } = window.PrismDesignSystem_39d121;

Examples

Transactional

<Dialog isOpen={open} onClose={close} title="Invite a member"
  primaryLabel="Send invite" onPrimary={send}>
  <TextField label="Email" type="email" />
</Dialog>

Danger

<Dialog isOpen={open} onClose={close} variant="danger" size="sm"
  title="Delete workspace" primaryLabel="Delete" onPrimary={destroy}>
  This can’t be undone.
</Dialog>

Props

Prop	Type	Required	Description
isOpen	boolean	Yes
onClose	() => void	—
title	React.ReactNode	—
size	"xs" | "sm" | "md" | "lg"	—
variant	"passive" | "transactional" | "danger"	—	Intent-based variant (Carbon approach): - "passive": informational, no actions, freely dismissable. - "transactional": requires a choice; background click won't dismiss. - "danger": transactional with a destructive primary action. Inferred from the action props when omitted.
primaryLabel	string	—	Primary action label — renders the standard footer.
onPrimary	() => void	—
secondaryLabel	string	—	Secondary/cancel label. Default "Cancel".
onSecondary	() => void	—
isPrimaryDisabled	boolean	—
dismissable	boolean	—	Override whether scrim-click/Esc dismiss. Defaults by variant.
footer	React.ReactNode	—	Custom footer node (overrides the generated action buttons).
children	React.ReactNode	—