Popover
A labeled nonmodal contextual layer for interactive content.@gemologic/sheen · overlaysPlayground
<Popover title="View options" trigger="View options" placement="bottom"><Checkbox label="Show archived" /></Popover>Variant matrix
View options
placement: top
placement: top-start
placement: top-end
placement: bottom
placement: bottom-start
placement: bottom-end
placement: left
placement: right
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Popover.tsx- Tokens
--sheen-color-bg-raised--sheen-color-focus-ring--sheen-duration-fast--sheen-elevation-overlay
Accessibility
Role: dialogKeyboard: Tab, Shift+Tab, Enter, Space, EscapeDo
- Use a stable title and retain owner data while refreshing content.
Do not
- Do not use a popover when the workflow requires a modal decision.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
trigger * | JSX.Element | — | Visible native opening-button content. It must provide a clear accessible name. |
title * | string | — | Required visible and accessible popover title. |
description | string | — | Optional associated supporting text. |
open | boolean | — | App-owned open state. |
defaultOpen | boolean | false | Uncontrolled initial state; portal content mounts when its theme target is ready. |
onOpenChange | (open: boolean) => void | — | Requested open-state changes; controlled owners may reject them. |
placement | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right" | bottom | Preferred logical side and alignment, with viewport collision handling. |
class | string | — | Additional content classes. |