Skip to main content

Action List Guidelines

The Action List component displays a list of related action items, enabling users to choose an action with immediate effect, e.g. picking a personalization token to insert into a text field.

Items can be filtered using the Search Input, organized into groups, made into a selection by the user, or be in a disabled state.

Filtering: The user can enter keywords to the Search Input to filter the list of displayed items. The Search Input is shown automatically when the list contains more than 7 items. This behavior can be overridden by parameters to always show or always hide the Search Input.

Grouping:

  • Items can be organized into named groups, which can be useful to display related items together and give them more context.
  • The group label is a static, non-interactive text label displayed above the grouped items.
  • Groups cannot contain sub-groups.

Items:

  • When the user clicks an item, that event can be used to trigger custom actions.
  • Items can be disabled.
  • Items can be made into a selection by the user.

Best Practices​

  • Use alphabetical order by default: to make items easier to find, display items in alphabetical order, unless there's a specific ordering logic (e.g. list of time zones ordered by offset).
  • Avoid in forms: avoid putting Action List in forms, as clicking items should have an immediate effect. In forms, use Select, Multiselect, Checkbox, or Radio instead.

Similar Components​

  • Select and Multiselect: designed for single or multiple selections in form-like workflows. Unlike Action List, they don't have an immediate effect.

Content Guidelines​

  • Action items should follow the same content guidelines as Buttons.

Using Colored Items​

Action List items can have a color, which makes it easy to visually connect them to other UI elements, e.g. an Action List item representing a data object in a chart using the same color.

The item uses the color for its text and icon, and a lower contrast version for its background in hover and selected states. For example, blue-600 gives text/icon in blue-600 and a selected background of blue-100.

Avoid using low-contrast colors like blue-100 for text/icon, as the selected state background will also be blue-100.

For charts, use the chart color tokens in order (chart-01, chart-02, etc.).