Popover
Show contextual content in an anchored floating panel.
Preview
Import
import { Popover, PopoverTrigger, PopoverAnchor, PopoverContent } from "@sigil-ui/components";Usage
<Popover>
<PopoverTrigger asChild><Button variant="outline">Open popover</Button></PopoverTrigger>
<PopoverContent>
<p className="text-sm text-[var(--s-text-muted)]">Popover content goes here.</p>
</PopoverContent>
</Popover>Sub-components
This component includes the following parts:
<PopoverTrigger><PopoverAnchor><PopoverContent>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-card-radius | Card radius |
--s-border | Border |
--s-border-style | Border style |
--s-surface | Surface |
--s-text | Text |
--s-shadow-md | Shadow md |