Popover

Popovers are small overlays that open on demand, usually when the merchant clicks a button. They let merchants access supplementary 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
children
React.ReactNode
The content to display inside the popover
fixed
boolean
Remains in a fixed position
fullHeight
boolean
Allow popover to stretch to fit content vertically
fullWidth
boolean
Allow popover to stretch to the full width of its activator
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: CloseSource) => void
Callback when popover is closed

Best practices

Popovers should:

  • Always show 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 the merchant hits 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 the menu items in a popover menu include a series of actions, each item should:

  • Be clear and predictable: merchants should be able to anticipate what will happen when they click on an action item. Never deceive a merchant 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: avoid unnecessary words and articles such as the, an, or a.

  • Add menu item

  • Add a menu item

If the menu items in a popover menu include a series of navigational links, each item should:

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

  • Online store

  • Messenger

  • Facebook

  • Buy Button

  • Sales channel