Badges display short pieces of information such as attributes, status or labels. They help people quickly scan an interface by highlighting important details without interrupting the primary content. Backpack provides two badge variants:
- Default ā Displays information only.
- Interactive ā Displays information that can be pressed to reveal more detail.
Both variants share the same visual styles and optional leading icons. The interactive badge adds a trailing information icon to indicate it can be pressed. Badges should be used sparingly. Too many badges compete for attention and make content harder to scan.
Variants
Default
Use the default badge to display information that doesnāt require interaction.
Examples include:
- Attributes
- Status
- Labels
- Product details
Interactive
Interactive badges let people discover more information without leaving the current context.
They include a trailing information icon that clearly communicates the badge can be pressed.
Use an interactive badge when pressing it:
- Opens a bottom sheet, or popover.
- Reveals supporting information.
- Provides additional context without changing the current view.
Styles
Both Default and Interactive badges are available in the following styles.
|
Style |
Usage |
|---|---|
|
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. |
|
Loyalty |
Use this to highlight information that is specific to a travellerās loyalty experience, such as a member benefit, reward, or loyalty status. Do not use it for general promotions or completed actions, use Brand or Success instead. |
Anatomy
A badge consists of:
- Label (required)
- Optional leading icon
- Optional trailing information icon (Interactive variant only)
The label should always be present. Icons support the label but should never communicate meaning on their own.
Leading icon
An optional leading icon can be used if it adds a visual description of the copy on the label.
Trailing information icon
The trailing information icon is exclusive to the Interactive variant. It isnāt configurable and always uses the same 12px information glyph to provide a consistent affordance across the system. Although it looks like an icon, it isnāt part of the Backpack icons and canāt be used elsewhere.
