Popover displays contextual content in a floating panel anchored to a trigger element. Supports button and link triggers, top/bottom placement, and configurable action alignment.
Loading demo: popover-real-world
npx sdaia-ui@latest add popover
import { Popover } from "@/components/ui/popover"<Popover type="button" placement="bottom" actionsAlignment="start" />Use surface="glass" to enable Glass Effect.
Loading demo: popover-glass
The default popover with a button trigger anchored to the bottom with start-aligned actions.
Loading demo: popover-default
Popover triggered by a text link. Click to toggle open and closed.
Loading demo: popover-link
Popover triggered by a button.
Loading demo: popover-button
Popover positioned above (top) or below (bottom) the trigger element.
Loading demo: popover-placement
Props for the Popover component.
Prop | Type | Default | Required |
|---|---|---|---|
open | boolean | - | optional |
defaultOpen | boolean | false | optional |
onOpenChange | (open: boolean) => void | - | optional |
trigger | ReactNode | - | optional |
triggerType | 'button' | 'link' | 'button' | optional |
triggerLabel | string | 'Open' | optional |
featuredIcon | ReactNode | - | optional |
title | string | - | optional |
helperText | ReactNode | - | optional |
supportingText | ReactNode | - | optional |
image | string | ReactNode | - | optional |
imageAlt | string | '' | optional |
instanceRowCount | number | 0 | optional |
instanceRows | ReactNode | - | optional |
children | ReactNode | - | optional |
showCloseButton | boolean | true | optional |
primaryActionLabel | string | - | optional |
secondaryActionLabel | string | - | optional |
onPrimaryAction | () => void | - | optional |
onSecondaryAction | () => void | - | optional |
actionsAlignment | 'start' | 'center' | 'end' | 'start' | optional |
placement | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' |... | 'bottom' | optional |
showBeak | boolean | true | optional |
dir | 'ltr' | 'rtl' | - | optional |