Components
Popover
A popup that displays content when triggered by a button or popover trigger.
Basic Usage
The Popover component provides a popup that displays content when triggered by a button or other elements.
import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from "@epilot/volt-ui"
<div className="flex flex-col gap-4">
<Popover>
<PopoverTrigger asChild>
<Button>Edit Profile</Button>
</PopoverTrigger>
<PopoverPortal>
<PopoverContent>
Content
</PopoverContent>
</PopoverPortal>
</Popover>
</div>API Reference
Popover
The root component that wraps the popover trigger and content.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled open state of the popover. |
defaultOpen | boolean | false | Uncontrolled default open state. |
onOpenChange | (open: boolean) => void | - | Callback fired when the open state changes. |
modal | boolean | true | When true, focus is trapped within the popover and outside interaction is disabled. |
PopoverPortal
The portal component that renders the popover content.
| Prop | Type | Default | Description |
|---|---|---|---|
forceMount | boolean | false | When true, the popover content is always mounted. |
children | React.ReactNode | - | The content to render inside the portal. |
container | HTMLElement | null | null | The container to render the portal in. |
PopoverTrigger
The element that triggers the popover.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | When true, merges props with the child element instead of rendering a button. |
PopoverContent
The content container for the popover. Includes animations and positioning options.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | The preferred side of the trigger to render against. |
sideOffset | number | 4 | The distance in pixels from the trigger. |
align | "start" | "center" | "end" | "center" | The preferred alignment against the trigger. |
alignOffset | number | 0 | An offset in pixels from the "start" or "end" alignment options. |
className | string | - | Additional CSS classes to apply to the popover content. |
PopoverAnchor
An optional anchor element that the popover positions relative to. When provided, the popover will position itself relative to this element instead of the trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | When true, merges props with the child element instead of rendering a button. |