Dialog

Blocking confirmation overlay with short title, message, and usually two actions.

Open in FigmaView in Storybook

Preview

Code

Inspect

Appearance

Content

title

description

primaryActionLabel

secondaryActionLabel

Layout & behavior

hasImage

hasSecondaryAction

isDismissable

Props — Dialog

Prop	Type	Description
`type`	`"default" \| "iconTop" \| "customContent"`	Layout variant for the confirmation overlay.
`title`	`ReactNode`	Dialog heading.
`description`	`ReactNode`	Short confirmation message.
`hasImage`	`boolean`	Show an image slot in the body.
`image`	`ReactNode`	Image content when hasImage is set.
`topIconName`	`FaIconName \| string`	Floating badge icon when type is iconTop (Figma shortcode).
`hasSecondaryAction`	`boolean`	Show the secondary footer button.
`primaryActionLabel`	`ReactNode`	Primary button label.
`secondaryActionLabel`	`ReactNode`	Secondary button label.
`isDismissable`	`boolean`	Allow dismiss via close control or backdrop.
`onClose`	`() => void`	Called when the dialog is dismissed.
`open`	`boolean`	Controls dialog visibility.
`children`	`ReactNode`	Custom body when type is customContent.
`surfaceOnly`	`boolean`	Render the dialog surface without open/close behavior.