Skip to content

ComponentsPopover

Components

Popover

Non-modal anchored panels: surface-popover (#fff | #303030), radius 12, panel shadow, max 320; open and close instantly.

Popover

Default placement bottom / center, 6px from the trigger, padding 16. Outside press and Escape close it; Escape returns focus to the trigger; the page does not scroll-lock.

Share (480, align end, offset 8)
Field-anchored results (focus stays in the field)
Scrolling body with scroll fades
Animated (opt-in) and sides

Padding

none 0 · xs 6 · sm 8 · md 12 · lg 16 (default).

padding

Touch presentation

presentation="auto" (default) renders a bottom sheet on coarse pointers; "sheet" forces it, "popover" forces the anchored popup.

presentation="sheet"

Light and dark

Static preview: outer ring in light, inset ring in dark, popover drop shadow.

light
Share chatAnyone with the link can view this chat.
dark
Share chatAnyone with the link can view this chat.