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.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Events
Best practices
Actions lists should:
- Be used for secondary or less important information and actions since they’re hidden until merchants expose 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.
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.
Each item in an action list should be scannable avoiding unnecessary words and articles such as the, an, or a.
Related components
- To combine more than one button in a single layout, use the button group component
- To display a list of related content, use the list component
Accessibility
Items in an action list are organized as list items (<li>) in an unordered list (<ul>) and are conveyed as a group of related elements to assistive technology users. Each item is implemented as a button.
Keyboard support
- Give the action list items keyboard focus with the tab key (or shift + tab when tabbing backwards)
- When action list items have a role of
menuitem, navigate through the list with down arrow (up arrow to move backwards) - Activate buttons with the enter/return key or the space key
High contrast support
- Each item is clearly discernible in high contrast mode
- Each item that is focused and hovered is clearly discernible in high contrast mode