Modal

Blocking overlay for rich interactive content (forms, media, multi-step flows).

Open in FigmaView in Storybook

Preview

Code

Inspect

Appearance

Content

title

body

primaryActionLabel

secondaryActionLabel

Layout & behavior

hasSecondaryAction

isDismissable

Props — Modal

Prop	Type	Description
`type`	`"default" \| "verticalImage" \| "horizontalImage"`	Layout variant for rich modal content.
`title`	`ReactNode`	Header title.
`body`	`ReactNode`	Default body copy (pre-seed). Used when children is omitted — full body on default, text slot on image layouts.
`image`	`ReactNode`	Image slot for image layout variants.
`children`	`ReactNode`	Custom content for the body text slot. Replaces body for every type; image layouts keep the fixed image slot.
`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 modal is dismissed.
`open`	`boolean`	Controls modal visibility.
`surfaceOnly`	`boolean`	Render the modal surface without open/close behavior.