BadgeList
Presents a list of short details with added visual information.
- 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.
- 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.
 |  |  |  |  |
|---|---|---|---|---|
Released | Released | n/a | n/a | Released |
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.
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.
There are five types for the badge list 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.
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 badge list items help to highlight a desirable detail. Use them for potentially attractive features (such as a guaranteed transfer).
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 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.