Popover | Lime design system

Examples

Share a bill

Explain a fee

When to use it

Use: A share link, copy button or small form next to the control that opened it.
Use: A filter with a few options that should not take the screen.
Use: Extra detail on a control that needs buttons or inputs inside.
Not for: A one-line label on hover. Use Tooltip.
Not for: A list of commands. Use Dropdown menu.
Not for: A task that stops the page. Use Dialog.
Not for: A large panel of details. Use Sheet.

8 rules

Must: Open on press; never openOnHover for a panel with buttons or fields. Because a pointer passing over the trigger opens a panel of controls nobody asked for.
Must: Add PopoverTitle when the panel holds more than one control. Because the panel takes its accessible name from PopoverTitle, and without it is read as an unnamed dialog.
Should: Title it in two to four words naming the task.
Should: Keep the panel at 288px; use a Sheet or Dialog for a large one.
Never: Use a popover to name an icon button; use a Tooltip. Because the name shows only after a press, and the button itself stays unnamed.
Never: Open a popover from a popover; put the controls in the first. Because the second panel covers the first, and Escape and focus return must unwind two layers.
Should: Cap tall content with a ScrollArea; the panel limits width, not height.
Must: Break long unbroken strings in the content; the panel does not set break-word. Because a pasted account number or share link runs past the 288px panel edge.

4 checks

: Press opens it; Escape or an outside press closes it and focus returns to the trigger.
: PopoverTitle names the panel through aria-labelledby.
: The panel is a fill and a shadow with no border, so its edge may drop in forced colors.
: Escape closes the popover first and a dialog behind it second.

6 edge cases

No room on the side: The panel flips and shifts to stay 8px inside the viewport.
Right to left: Side and align resolve against the reading direction.
Reduced motion: The panel appears at once.
Empty content: An empty padded box; render nothing instead.
Slow content: It opens at once; show loading inside.
Inside a dialog or sheet: It portals into the Lime scope and renders above.

4 props

Popover: Base UI Popover.Root props
PopoverContent side: 'top' | 'right' | 'bottom' | 'left' default 'bottom'
PopoverContent align: 'start' | 'center' | 'end' default 'center'
PopoverContent sideOffset, alignOffset: number default 8, 0

12 tokens

--raised: #ffffff
--radius-panel: 16px
--shadow-menu: 0 8px 24px -6px rgb(var(--shadow-ink) / 0.16), 0 2px 6px rgb(var(--shadow-ink) / 0.06)
--popover: 320px
--text-base: 16px
--weight-semibold: 600
--text-sm: 14px
--fg-2: #4a4943
--dur-base: 200ms
--dur-fast: 140ms
--ease-out: cubic-bezier(0.16, 1, 0.3, 1)
--scale-enter: 0.97