Controls
Interaction
Popover
A floating panel for filters, quick settings and small editable surfaces.
Component
15
Import
import { Popover, PopoverContent, PopoverTrigger } from "@swirski/ui";Composition
Popover
|-- PopoverTrigger
`-- PopoverContentPlayground
Usage
<Popover defaultOpen>
<PopoverTrigger>Open note</PopoverTrigger>
<PopoverContent align="start">
Popover content
</PopoverContent>
</Popover>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
Popover.childrenRequired | ReactNode | - | Generated from PopoverProps. |
Popover.defaultOpen | boolean | false | Initial uncontrolled open state. |
Popover.onOpenChange | ((open: boolean) => void) | - | Generated from PopoverProps. |
Popover.open | boolean | - | Controlled open state. |
Popover.size | 'sm' | 'md' | 'lg' | "md" | Generated from PopoverProps. |
Popover.tone | 'default' | "default" | Generated from PopoverProps. |
Popover.variant | 'default' | 'compact' | "default" | Generated from PopoverProps. |
PopoverTrigger.asChild | boolean | false | Generated from PopoverTriggerProps. |
PopoverTrigger.size | 'sm' | 'md' | 'lg' | "md" | Generated from PopoverTriggerProps. |
PopoverTrigger.tone | 'default' | "default" | Generated from PopoverTriggerProps. |
PopoverTrigger.variant | 'default' | 'compact' | "default" | Generated from PopoverTriggerProps. |
PopoverContent.align | 'start' | 'end' | "start" | Aligns the content to the trigger. |
PopoverContent.size | 'sm' | 'md' | 'lg' | "md" | Generated from PopoverContentProps. |
PopoverContent.tone | 'default' | "default" | Generated from PopoverContentProps. |
PopoverContent.variant | 'default' | 'compact' | "default" | Generated from PopoverContentProps. |
className | string | - | Adds classes to root, trigger or content slots. |