Popover Button

Popover Button is a trigger that opens a floating panel with contextual actions or information.

When to use

Use when you need to reveal additional actions or details without navigating away from the current view.
Use when screen real‑estate is limited and a temporary overlay is preferable to permanent layout space.

Don’t use if the content fits comfortably in the primary view; show it inline instead.
Don’t use for critical actions that require immediate confirmation; choose a modal dialog for that purpose.

Variant	Description	When to use
Size – Large	Largest touch target with extra padding.	Use when the button must stand out or when touch input is primary.
Size – Medium	Standard button size.	Use for most contexts where space is moderate.
Size – Small	Compact button with reduced padding.	Use in dense UI areas or when space is scarce.
State – Normal	Default appearance.	Use as the baseline state.
State – Hover	Visual feedback on pointer hover.	Applies automatically on hover-capable devices.
State – Open	Indicates the popover is currently displayed.	Use to signal that the overlay is active.
State – Empty	Shown when the popover has no content.	Use to convey that there are no actions or info to display.

Prop	Type	Default	Description
`showDivider`	`boolean`	`true`	Whether a divider is rendered between the header and the content area.
`showSearch`	`boolean`	`true`	Shows a search input inside the popover when `true`.
`expanded`	`boolean`	`true`	Controls whether the popover is initially expanded.
`haveActions`	`boolean`	`true`	Indicates the presence of action buttons inside the popover.
`hasScroll`	`boolean`	`true`	Enables a scrollable region when content exceeds the visible area.
`size`	`variant`	`Large`	Defines the button’s size; options are `Large`, `Medium`, `Small`.
`state`	`variant`	`Normal`	Visual state of the button; options are `Normal`, `Hover`, `Open`, `Empty`.

Use aria-haspopup="menu" (or "dialog" if the popover contains a dialog) on the button to indicate it controls a popover.
Provide an accessible name for the button via aria-label or visible text.
When the popover opens, move focus to the first interactive element inside it and trap focus until it closes.
Ensure all text and interactive elements in the popover meet the 3:1 contrast ratio requirement.
If showSearch is enabled, label the search input with a descriptive aria-label or <label> element.