Components / overlays
Popover
Small floating panel with rich content anchored to a trigger, richer than a Tooltip.
import { Popover } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Popover, Button } from '@basiiik/ui';
<Popover trigger={<Button variant="outline">Filters</Button>} title="Filters">Popover</Popover>- Example values were filled in for the required props trigger, title: replace them with your own.
- Open with the trigger, or control it with
open. Non-modal. Closes on Escape (focus returns to the trigger), on a press outside, and when focus leaves. The Figma Arrow axis is two props:placement(which side of the trigger; it flips when there is no room) andarrow(show or hide it). - Storybook: Overlays/Popover.
Props
| Prop | Type | Notes |
|---|---|---|
size | "sm" | "md" | Default "md" |
placement | "top" | "bottom" | "left" | "right" | |
arrow | boolean | |
title | ReactNode | |
children | ReactNode | |
trigger required | ReactElement<TriggerProps, string | React.JSXElementConstructor<any>> | |
aria-label | string |
Other props
| Prop | Type | What it does |
|---|---|---|
open | boolean | Controlled open state. |
defaultOpen | boolean | |
onOpenChange | (open: boolean) => void | |
className | string |
States. Open with the trigger, or control it with open. Non-modal. Closes on Escape (focus returns to the trigger), on a press outside, and when focus leaves. The Figma Arrow axis is two props: placement (which side of the trigger; it flips when there is no room) and arrow (show or hide it).
Use it when
- Rich, anchored content such as filters or details
Do not use it when
- A few words of help text (use Tooltip)
- Blocking decisions (use Modal)
Rules for agents
- Every Popover has a name: a visible title, or aria-label when there is no title
- The trigger is a real button (Button or IconButton); the Popover adds aria-expanded and aria-controls
- Keep content short and related to the trigger; it is non-modal, so the page stays usable
- Use placement to choose a side; it flips when there is no room
Avoid
- A Popover for a few words of help (use Tooltip)
- A blocking decision or confirmation in a Popover (use Modal)
- A list of actions in a Popover (use Dropdown Menu)
- A trigger that is not focusable, such as a plain div or span
- Long forms or scrolling content in a Popover (use Drawer)
Writing the content
- Titles are short nouns or questions
- Lead with the most important information; add a Link for more
- Use sentence case
Keyboard
- Escape closes
- Tab can move into interactive content
Accessibility
- Trigger uses aria-expanded and aria-controls
- Label the popover via aria-labelledby
Colour tokens it reads
color.bg.surfacecolor.border.subtlecolor.text.primarycolor.text.secondaryRelated
overlays 10 Figma variants Try it in the live demo