Badges can be added to a card to display an attribute, quality or state of a particular item. They should be used sparingly to avoid overwhelming the user. They come in five colours/styles for different use cases.

Styles

Normal

This badge can be used as an additional attribute or detail that helps with decision-making but doesn’t need urgent attention.

Strong

This badge can be used to add greater emphasis to a detail or attribute within a design.

Success

This badge can be used to highlight an action which the user has successfully completed.

Warning

This badge can be used as an attribute or detail that may have an impact on the traveller’s decision.

Critical

This badge can be used for information that prevents the user from completing an action.

Brand

The badge can be used to surface information linked to our brand, such as deals.

Anatomy

Leading icon

An optional leading icon can be used if it adds a visual description of the copy on the label.

Don’t create interactive badges. Use a button or chip to filter or take the user to a new page or view.