Feedback & Status
Popover
A popover is an overlay element positioned relative to a trigger.
A popover is an overlay element positioned relative to a trigger.
Component props#
| Name | Type | Description |
|---|---|---|
| placement | Placement | "top" | "bottom" | "left" | "right" | "start" | "end" |
| offset | number | Distance from the trigger element |
| isFullscreen | boolean | Opens popover in fullscreen mode |
| isOpen | boolean | Controlled open state. Used when the popover is not wrapped in a DialogTrigger |
| defaultOpen | boolean | Initial open state. Used when the popover is not wrapped in a DialogTrigger |
| onOpenChange | (open: boolean) => void | Called when the open state changes |
| isNonModal | boolean | Allows interaction with the rest of the page while open |
| sideOffset | number | Distance from the trigger element (default: 4) |
The popup carries the default surface (w-72, border, shadow, padding). A Dialog nested inside a
popover drops its own surface so the two do not stack.
Parts#
| Name | Type | Description |
|---|---|---|
| PopoverTrigger | component | Opens the popover |
| PopoverClose | component | Closes the popover |
| PopoverTitle | component | Accessible title, rendered as a Heading |
| PopoverDescription | component | Accessible description, rendered as muted Text |