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 lists 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 giving them more context.
• The group label will be displayed above the grouped items. The group label is a static, non-interactive text label.
• Groups cannot contain sub-groups.

Items:

• When the user clicks the item, that event can be used in the implementation 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 for the user, display items in alphabetical order, unless there's a specific ordering logic for the list (e.g. list of time zones shouldn't be ordered alphabetically, but 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: Select and Multiselect are designed to make either single or multiple selections in a list, which can be used in form-like workflows. Unlike Select and Multiselect, Action List items can have an immediate effect, such as a Button.

Content Guidelines

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

Using Colored Items

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

The item will use the color as its text and icon color, and use a lower contrast version of that color for its background in hover and selected states, e.g. if you use blue-600 for the item, the text and icon will be blue-600, while the selected state’s background will be blue-100.

Make sure not to use a low contrast version of a color for the text and icon so it won’t blend together with the background, i.e. avoid using blue-100, as the selected state’s background will also be blue-100.

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