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

Props

items
ItemDescriptor[]
Collection of actions for list
onActionAnyItem
onAction
Callback when any item is clicked or keypressed
sections
ActionListSection[]
Collection of sectioned action items

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