Popover
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.
<Popover triggerLabel="Export" triggerType="button" placement="bottom" title="Export Report"Installation
npx sdaia-ui@latest add popover
Usage
import { Popover } from "@/components/ui/popover"<Popover type="button" placement="bottom" actionsAlignment="start" />Examples
Default
The default popover with a button trigger anchored to the bottom with start-aligned actions.
<Popover triggerType="button" triggerLabel="Open" placement="bottom" actionsAlignment="start"Link
Popover triggered by a text link. Click to toggle open and closed.
<Popover triggerType="link" triggerLabel="Link" placement="top" actionsAlignment="start"Button
Popover triggered by a button.
<Popover triggerType="button" triggerLabel="Button" placement="top" actionsAlignment="start"Placement
Popover positioned above (top) or below (bottom) the trigger element.
<div className="flex items-center justify-center gap-spacing-4xl"> <Popover triggerType="button" triggerLabel="Top" placement="top" title="Placement: Top" supportingText="The popover appears above the trigger." primaryActionLabel="OK" showCloseButton /> <Popover triggerType="button" triggerLabel="Bottom" placement="bottom" title="Placement: Bottom" supportingText="The popover appears below the trigger." primaryActionLabel="OK" showCloseButton /></div>API Reference
PopoverProps
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 |