BadgeList

Presents a list of short details with added visual information.

Could not find example with the id: BadgeList-default

When to use

  • To display several details about a single idea like a transfer at an airport.
  • To use common visual cues (icons and colors) to help users scan the details.

When not to use

  • If the users can take an action—use the right action component.
  • When the information isn’t about only one thing—use a list.
  • With a single, simple piece of information—use a badge.
  • If there are choices the user must make—use list choices.

Component status

Figma

React

iOS

Android

Released
Released
N/A
N/A

Content structure

BadgeListItem: includes one item in the list; label: works best when short; icon: supports the label.

Content

Display short, static info

The items in the list should all be static information, not actionable.

If you have extra information to display, include it with progressive disclosure. Use a simple interaction, such as a tooltip or a secondary text link to open contextual help.

When doing so, make sure it’s clear that the interaction is there.

Could not find example with the id: BadgeList-progressive-disclosure

Support with icons

With a small space to convey a message and possibly several items to show, visual cues can help users scan and understand the idea more quickly. Use icons to display more information in a smaller space, such as what form of transport is included.

Make sure that any information you include in the icon is accessible, either in the text around it or as a label to the icon.

Look & feel

List item types

There are five types for the badge list items.

Neutral items

Neutral badge list items present information without adding any emotion. They’re useful when the information isn’t so important to the user’s main flow.

Info items

Informational badge list items help to highlight some information as particularly important. They draw attention to the item without making it seem positive or negative.

Success items

Success badge list items help to highlight a desirable detail. Use them for potentially attractive features (such as a guaranteed transfer).

Warning items

Warning badge list items highlight information that users need to be aware of to avoid problems. They’re associated with negative emotions so only use them occasionally to stop potential problems before they happen.

Critical items

Critical badge list items call attention to problems require attention from users. For example, as a reason a specific choice can’t be made, or to highlight that they might not be protected by a service (like a guarantee). These badges create feelings of stress so only use them for issues where they’re truly necessary.