Use the action list as a container for vertically stacked list items.
May contain interactive (has shadow) or non-interactive (no shadow) content.
The action list has an optional list heading and icon.
1. Non interactive with heading
2. Interactive without heading
Usage
Use an Action List to group related actions vertically. It provides a clear, structured way to present list items in a single container.
A drop shadow is applied by default when the list contains at least one interactive item. This helps users understand which lists are actionable.
Use the optional heading section to introduce or classify the list’s contents. Include the graphic, heading, and/or subheading when context is helpful like labelling settings, account details, or grouped tasks.
Use a single item when appropriate. A list can contain just one item without dividers if grouping is still useful.
Writing an action list
The Action List is flexible and can contain different types of content. These guidelines help ensure lists remain clear, readable, and predictable.
Mixed content is allowed
- An Action List may contain interactive items, informational items, or a mix of both
- The presence of an Action List does not mean that every item performs an action
- Do not rely on the list container alone to communicate whether an individual item is interactive
Each list item should clearly communicate its own purpose.
The list heading should provide context
- Use the list heading to explain what the list is about, not what to do
- Headings should be short and descriptive
- Subheadings can add helpful detail but should remain concise
Avoid placing instructions, warnings, or actions in the list heading.
Avoid overloading list items
- List items should remain easy to scan
- Avoid placing too much text, too many actions, or complex layouts inside a single item
- If an item becomes visually heavy, consider whether it should be a different component
The Action List works best when items are visually consistent in height and density.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
v5+ |
|
App (@ovotech/element-native) |
v5+ |
Related components