Components menu
  2. components
  3. overlays
  4. popover

Popover

Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.

Examples

Use when presenting a set of actions in a disclosable menu.

Drag to resize example

Props

activatorRequired
ReactElement
The element to activate the Popover
activatorWrapper
string
The element type to wrap the activator with
activeRequired
boolean
Show or hide the Popover
ariaHaspopup
false | true | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog"
Used to illustrate the type of popover element
children
React.ReactNode
The content to display inside the popover
fixed
boolean
Remains in a fixed position
fluidContent
boolean
Allow popover content to determine the overlay width and height
fullHeight
boolean
Allow popover to stretch to fit content vertically
fullWidth
boolean
Allow popover to stretch to the full width of its activator
preferInputActivator
boolean
Use the activator's input element to calculate the Popover position
preferredAlignment
"left" | "center" | "right"
The preferred alignment of the popover relative to its activator
preferredPosition
"above" | "below" | "mostSpace"
The preferred direction to open the popover
preventAutofocus
boolean
Prevent automatic focus of the first field on activation
sectioned
boolean
Automatically add wrap content in a section
onCloseRequired
(source: PopoverCloseSource) => void
Callback when popover is closed

Accessibility

Popovers usually contain an option list or an action list, but can also contain other controls or content.

A popover can contain many numerous types of content. Whether it's a menu, grid or something entirely different! When aria-expanded is applied to an element, aria-haspopup will default to menu. To assist screen readers you'll need to pass ariaHaspopup to Popover.

Keyboard support

  • When a popover opens, focus moves to the popover container
  • Once focus is in the popover, merchants can access controls in the popover using the tab key (and shift + tab backwards) and standard keystrokes for interacting
  • Merchants can dismiss the popover by tabbing out of it, pressing the esc key, or clicking outside of it
  • When the popover is closed, focus returns to the element that launched it

Popover with action list

Use when presenting a set of actions in a disclosable menu.

Popover with action list for Android

Popover with content and actions

Use to present a combination of content, instructions, and actions in a panel for tasks that are of low or secondary importance to the current page. When used this way, popovers provide useful entry points to related features without overwhelming merchants.

Popover with content and actions for Android

Accessibility

See Material Design and development documentation about accessibility for Android:

Popover with action list

Use when presenting a set of actions in a disclosable menu.

Popover with action list for iOS

Popover with content and actions

Use to present a combination of content, instructions, and actions in a panel for tasks that are of low or secondary importance to the current page. When used this way, popovers provide useful entry points to related features without overwhelming merchants.

Popover with content and actions for iOS

Action sheet

Use when you have few actions that affects the whole page. Action sheets doesn’t support icons or additional information.

iOS action sheet

Accessibility

See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

Best practices

Popovers should:

  • Always be positioned next to the button or other interface element that triggers them
  • Be used for secondary or less important information and actions since they’re hidden until merchants hit the trigger
  • Contain navigation or actions that share a relationships to each other
  • Be triggered by a clearly labeled button

Content guidelines

Popover content

If a popover contains actions, they should:

  • Be clear and predictable: merchants should be able to anticipate what will happen when they click on an action item. Never deceive merchants by mislabeling an action.

  • Create order

  • Buy shipping label

  • New order

  • Buy

  • Be action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.

  • Rename

  • Edit HTML

  • Duplicate

  • HTML editing options

  • File name changes

  • Duplicate this order so that you can make edits, updates, or changes

  • Be scannable, especially when the popover contains a list of actions or options. Avoid unnecessary words and articles such as “the”, “an”, or “a”.

  • Add menu item

  • Add a menu item

If the popover includes a series of navigational links, each item should:

  • Be concise but still give merchants enough information so they can easily find and accurately navigate to the path they want.

  • Online store

  • Messenger

  • Facebook

  • Buy Button

  • Sales channel

View source on GitHub · Preview examples in Chromatic