Choose a version:

Popover

The popover component displays contextual content in an overlay triggered by a button. Use for secondary actions, settings, or information that doesn't require a full modal.

For interactions that need more space or user focus, such as confirmations or complex forms, use modal instead.

Popovers open in response to user interaction only, not programmatically on page load.

Support

Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the popover component.

Anchor to blockSize blockSize Default: 'auto': The block size of the popover (height in horizontal writing modes). Learn more about the block-size property.
Anchor to id id string: A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
Anchor to inlineSize inlineSize Default: 'auto': The inline size of the popover (width in horizontal writing modes). Learn more about the inline-size property.
Anchor to maxBlockSize maxBlockSize Default: 'none': The maximum block size of the popover. Constrains the popover's height to prevent it from exceeding this value. Learn more about the max-block-size property.
Anchor to maxInlineSize maxInlineSize Default: 'none': The maximum inline size of the popover. Constrains the popover's width to prevent it from exceeding this value. Learn more about the max-inline-size property.
Anchor to minBlockSize minBlockSize Default: '0': The minimum block size of the popover. Ensures the popover maintains at least this height. Learn more about the min-block-size property.
Anchor to minInlineSize minInlineSize Default: '0': The minimum inline size of the popover. Ensures the popover maintains at least this width. Learn more about the min-inline-size property.

SizeUnitsOrAuto

Represents size values that can also be set to `auto` for automatic sizing. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `auto`: Automatically sizes based on content and layout constraints. Learn more about the [auto value](https://developer.mozilla.org/en-US/docs/Web/CSS/width#auto).

SizeUnits | "auto"

SizeUnits

Represents size values in pixels, percentages, or zero. - `` `${number}px` ``: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`). - `` `${number}%` ``: Relative size as a percentage of the parent container (such as `50%`, `100%`). - `0`: Zero size, equivalent to no dimension.

`${number}px` | `${number}%` | `0`

SizeUnitsOrNone

Represents size values that can also be set to `none` to remove the size constraint. - `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. - `none`: No size constraint, allowing unlimited growth. Learn more about the [none value](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#none).

SizeUnits | "none"

Anchor to EventsEvents

The popover component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to hide hide <typeof tagName>: A callback fired immediately after the popover is hidden.
Anchor to show show <typeof tagName>: A callback fired immediately after the popover is shown.

CallbackEventListener

A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.

(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null

CallbackEvent

An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to ExamplesExamples

Anchor to Show a form in a popoverShow a form in a popover

Collect input inline without navigating away from the page. This example presents a text field and submit button inside a popover for verifying a veteran ID.

Show a form in a popover

A small floating panel anchored to a trigger element displaying contextual content.

html

<s-button commandFor="popover-veteran-id">Verify veteran status</s-button>

<s-popover id="popover-veteran-id">

<s-stack gap="base" padding="base" direction="inline">

<s-text-field label="Veteran ID"></s-text-field>

<s-button variant="primary">Validate</s-button>

</s-stack>

</s-popover>

Anchor to Display contextual informationDisplay contextual information

Surface supplementary information on demand without cluttering the main view. This example shows shipping details in a popover triggered by a button.

html

<s-button commandFor="shipping-details">Shipping details</s-button>

<s-popover id="shipping-details">

<s-stack gap="base" padding="base">

<s-heading>Standard shipping</s-heading>

<s-paragraph>Estimated delivery: 5–7 business days</s-paragraph>

<s-paragraph>Tracking number will be emailed once your order ships.</s-paragraph>

</s-stack>

</s-popover>

Anchor to Show a list of actionsShow a list of actions

Present a set of related actions in a compact overlay. This example shows an action list with options for returns, issue reporting, and support.

html

<s-button commandFor="order-actions">More actions</s-button>

<s-popover id="order-actions">

<s-stack gap="none" padding="small">

<s-clickable padding="small">

<s-text>Request a return</s-text>

</s-clickable>

<s-clickable padding="small">

<s-text>Report an issue</s-text>

</s-clickable>

<s-clickable padding="small">

<s-text>Contact support</s-text>

</s-clickable>

</s-stack>

</s-popover>

Anchor to Best practicesBest practices

Avoid placing critical information in a popover: Popovers are hidden until triggered, making them unsuitable for essential content that customers need to see immediately.
Group related actions: Contain actions that share a relationship to each other so the popover feels cohesive.
Trigger with a clearly labeled button: The button that opens the popover should clearly indicate what'll appear when activated.

Was this page helpful?