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
<Popover
  active
  activator={<Button>More actions</Button>}
>
  <ActionList
    items={[
      {content: 'Import'},
      {content: 'Export'},
    ]}
  />
</Popover>
Name
Type
Description
children
React.ReactNode
The content to display inside the popover
fullWidth
boolean
If true, the popover will stretch to the full width of it"s activator
preferredPosition
enum
The preferred direction to open the popover
active
boolean
Show or hide the Popover
activator
React.ReactElement
The element to activate the Popover
activatorWrapper
string
The element type to wrap the activator with
preventAutofocus
boolean
Prevent automatic focus of the first field on activation
sectioned
boolean
Automatically add wrap content in a section
onClose
function(source: React.ReactElement)
Callback when popover is closed

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

There are lots of different paths a merchant can take and listing them all out in the interface would make the experience feel overwhelming and cluttered.

Solution

Popovers allow merchants to expose and hide additional information and actions when they’re ready to explore them. Popovers show next to the button that triggers them, so they demand minimal shift in merchant attention.


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