How to display badges
Badges must appear near the item they're adding extra detail to. Any badge styles can be used together but are stronger when the same style is used.
How to display multiple badges
Multiple badges should wrap in a space to create an easy-to-scan hierarchy.
Adding a popover
A badge can include an info icon trailing outside its container if you need to add extra information. If there are multiple badges within a group only one can have an info tooltip. The content in the popover must relate to the badge to the right of it.
When a traveller interacts with the label + icon it triggers a popover with a header and body copy about the specific badge label.
- Don’t use an information icon within the badge as this is only used to trigger popovers.
How to choose a style
The colours assigned to the styles have been carefully considered, if you don’t know which one to use then always start with normal. Here are a few examples of how each style could be applied.
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.
- Don’t place badges over images.
- Don’t change the colour or style of the badges.
Content guidelines
- Highlight an attribute, quality or state.
- Use 4 words or fewer – remember that localised copy can be up to 30% longer.
- Loosen grammar rules to keep it short.
- Keep copy to one line.
- Don’t add too much content into badges.
