Action list

Action lists render a list of actions or selectable options. This component is usually placed inside a popover container to create a dropdown menu or to let merchants select from a list of options.


Examples

Use for the least important actions so the merchant isn’t distracted by secondary tasks. Can also be used for a set of actions that won’t fit in the available screen space.

Drag to resize example
<ActionList
  items={[
    {content: 'Import file'},
    {content: 'Export file'},
  ]}
/>
Name
Type
Description
items
Action[]
Collection of actions for list
sections
Section[]
Collection of sectioned action items

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. Listing them all out in the interface would make the experience feel overwhelming and cluttered.

Solution

Action lists in popovers let merchants expose additional information and actions when they’re ready to explore them.


Best practices

Actions lists should:

  • Be used for secondary or less important information and actions since they’re hidden until the merchant exposes them by opening a popover
  • Contain actions that are related to each other

Content guidelines

Action lists

Each item in an action list should be clear and predictable. Merchants should be able to anticipate what will happen when they click on an action item.

  • Buy shipping label

  • Buy

Each item in an action list should always lead with a strong verb that encourages action. To provide enough context use the {verb}+{noun} format unless the action is clear with a single verb.

  • Rename

  • Edit HTML

  • File name changes

  • HTML editing options

Each item in an action list should be scannable avoiding unnecessary words and articles such as the, an, or a.

  • Add menu item

  • Add a menu item