ListAction

ListAction is a continuous vertical group of list items that can include text, icons, images and actions.

also known as Table, List, List item, Menu

An example of the ListAction component

Usage guidelines

When to use
  • To structure information or display a group of items that may or may not be actionable
  • Stack items vertically to organize related information, such as settings or options
  • Showcase key features or services with icons and brief descriptions
When not to use
  • Not suitable for displaying complex information requiring extensive explanation
  • Avoid using ListAction for long lists of data. It's better for highlighting and navigating

Best practices

  • When stacked vertically, maintain consistent spacing and alignment for a harmonious layout
  • Use consistent headings for each section on the same screen

Example of grouped ListAction items. For example, message settings under the heading - Messages.
Do

Group related items together to aid comprehension and streamline navigation. Consider dividers to break up groups that differ in purpose.

Example of two ListAction items with accompanying icons
Don't

Don't overuse icons. Pick easily recognizable icons that are directly related to the list item's purpose.

Two ListAction items with short and clear copy.
Do

Keep text succinct so row information is easy to scan and comfortable to read.

An ListAction item with four lines or complex copy
Don't

Use more than two lines for headers and three lines of subtext as it reduces scanability and can pose issues with internationalization, spacing, and comprehension.

Accessibility

  • Make sure the ListAction component includes appropriate list markup, with screen readers announcing the number of items, along with each item.
  • Make sure that interactive elements in list items, such as checkboxes or buttons, are both focusable and usable.
  • Include descriptive alt text for icons and labels that convey the purpose of each item.

People use Android’s accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:

Accessbile design on Android

; Opens a new tab

Accessible development on Android
; Opens a new tab

Design tokens

Anatomy

Variants

Defualt

The default ListAction items don't include a start item and only display text, but they still allow for end items to be displayed.


An example of the ListAction component

Start items

ListAction items can display three different start items.

  1. Avatar
    Commonly used to represent users, profiles, comments or messages in a list.
  2. Icon
    Using icons can effectively communicate meaning or context, thereby enhancing the visual information conveyed by list items. Icons sit in-line with header text. The icon start item supports all Gestalt icons.
  3. Image
    This is usually used when a visual representation is necessary and can also be used to represent a Pin or board.

An ListAction item for the user Sarah Smith, inluding her follower count and a follow button.

Avatar

An ListAction item with content about search privacy and a search icon.

Icon

An ListAction item for a board with a switch end item.

Image

End and navigation items

ListAction items can display a variety of end items.

  1. Button
    Used to perform a specific action related to an item in the list, such as following or unfollowing a user.
  2. Checkbox
    Allows users to pick multiple items within a list
  3. Select
    Enables users to pick a single option from a list
  4. Switch
    Toggles a specific feature on or off. Typically used for binary settings like activating dark mode.
  5. Icon
    Represents an action moving the user forward or about that specific list item. Typically an arrow moving the user to a new page. The icon end item supports: arrow-forward, arrow-up-right, check and add.
  6. Text
    Additional information at the end of the list item
  7. Text + Icon
    Additional information at the end of the list item with the addition of a specific icon button action

An ListAction showing users and buttons to follow them.

Button

An ListAction showing interest options and a multiple choice checkbox selection.

Checkbox

An ListAction showing a menu of links to further information.

Select

An ListAction showing a list of selctable items.

Switch

An ListAction with switches for each item.

Icon

An ListAction with a list of users and their follower count.

Text

An ListAction with email and password settings links.

Text + Icon

End item placement

Checkbox, Select, and Switch end items will always appear in line with the title. All other end items will appear centered within the container of the ListAction item.


An ListAction showing users and buttons to follow them.

Checkbox, Select, Switch

An ListAction showing interest options and a multiple choice checkbox selection.

All other end items

Writing

  • Use short, meaningful labels that succinctly describe the purpose of each item
  • Avoid truncation. If your copy is longer than three lines, consider revising the text.
  • For headings use nouns or short phrases with title-style capitalization, and don't use punctuation.

Localization

  • Be sure to localize the ListAction text. Note that localization can lengthen text by 20 to 30%.
  • Allow text to wrap as needed. However consider adjusting the text if headers are longer than two lines and subtext is longer than three lines.

A ListAction example reversed to reflect the location.
Edit page on GitHub
; Opens a new tab