Components
Popover
A small panel that opens from a button with extra information or controls. Unlike a tooltip it stays open until it is closed.
Playground
Shared with 3 people
Everyone with the link can view this report.
Figma variant
👉 Position=Top
🎛 Type=DefaultTypes
Default has a title with a close button and a line of text. HTML holds any content, such as a profile card. Both come in twelve positions with a beak.
Tokens
| Part | Token |
|---|---|
| Background | --color-surface-level-1 |
| Line | --border-width --color-surface-level-4 |
| Shadow | --shadow-form-level-1 |
| Padding | --space-medium |
| Radius | --radius-form-element-small |
| Title / text | --text-ui-text-bold / --text-ui-text-small-regular |
Notes from Figma
- 👉 Position names the side of the beak, so Position=Bottom is a popover above its button (placement="top"). The default placement in code is below the button.
- The title is Neue Haas 14 Medium, outside the type scale; code uses ui/text/bold.
- The beak is two vectors (18×8); code draws a 12px square turned 45°.
- There is no z-index token; the popover is absolutely positioned and can be clipped by a scrolling parent.
Figma to code
| Figma | React |
|---|---|
| 🎛 Type = Default | title="…" + children |
| 🎛 Type = HTML | children={<…/>} |
| 👉 Position = Top / Bottom / Left / Right (+ edges) | placement='bottom' / 'top' / 'right' / 'left' (+ -start / -end) |