Popover
A panel of supplementary content opened by a button, with no JavaScript: the Popover API and CSS anchor positioning do the work.
Examples
A gauntlet runs a concept through every check before the lab commits to it.
Props
Popover
A panel of supplementary content opened by a button, with no JavaScript: the Popover API opens it, closes it on Escape or an outside click and returns focus, and CSS anchor positioning places it beside its button, flipping when it would leave the viewport. Rendered on the server; nothing hydrates.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | The content of the button that opens it. |
variant? | ButtonVariant | "secondary" | |
children | ReactNode | — | What the popover holds: text, links, a short form. Not a menu: use Menu for actions. |
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Opens or closes it |
| Escape | Closes it |
| Tab | Moves into it from the button, in document order |
Accessibility
- The browser's light dismiss closes it on Escape and on an outside click; the button is told it controls an expanded popover.
- It sits in the top layer, so no z-index can hide it.
- Enter and exit use @starting-style and transition-behavior: allow-discrete, with motion tokens.
Browser support
The Popover API is in every target browser. CSS anchor positioning is in Chromium and Safari 26; elsewhere the popover opens centred in the viewport (the browser default), still dismissable and still in the top layer. Menus, listboxes and tooltips use React Aria's positioning instead, because they also need its keyboard behaviour.