Popover

Dismissible anchored card with title, body, optional image/custom content, stepper, and actions.

Open in FigmaView in Storybook

Preview

Code

Inspect

Appearance

hasCaret

Content

title

body

primaryActionLabel

secondaryActionLabel

stepperText

Layout & behavior

hasActionRow

hasStepper

hasPrimaryAction

hasSecondaryAction

isDismissible

Props — Popover

Prop	Type	Description
`content`	`"textOnly" \| "textImage" \| "custom"`	Layout variant for body content.
`caretPlacement`	`"bottomLeft" \| "bottomCenter" \| "bottomRight" \| "topLeft" \| "topCenter" \| "topRight" \| "leftTop" \| "leftCenter" \| "leftBottom" \| "rightTop" \| "rightCenter" \| "rightBottom"`	Anchor position relative to the trigger.
`hasCaret`	`boolean`	Show the pointing caret.
`title`	`ReactNode`	Card heading.
`body`	`ReactNode`	Main text content.
`image`	`ReactNode`	Image slot for textImage layout.
`customContent`	`ReactNode`	Custom body when content is custom. Unpadded blank canvas — own padding in the slot.
`hasActionRow`	`boolean`	Show the footer action row.
`hasStepper`	`boolean`	Show step indicator (e.g. tour steps).
`stepperText`	`ReactNode`	Step counter label.
`hasPrimaryAction`	`boolean`	Show the primary footer button.
`hasSecondaryAction`	`boolean`	Show the secondary footer button.
`primaryActionLabel`	`ReactNode`	Primary button label.
`secondaryActionLabel`	`ReactNode`	Secondary button label.
`isDismissible`	`boolean`	Show close control.
`onClose`	`() => void`	Called when the popover is dismissed.
`children`	`ReactElement \| ReactNode`	Trigger element for anchored mode.
`surfaceOnly`	`boolean`	Render the card surface without a trigger anchor.