Badge

Key Points

• Badges are usually nested inside other components such as lists or cards
• Variants have specific use cases
• The overall width adjusts with the size of the text
• Badge labels should be short and concise

Usage

The following styles can be used in any components or layouts as required. Their styles are used to provide supporting context to the text contained within.

Use Cases

• Default - This is the default badge that is use for aside information such as a count or supplementary information.
• Accent - This is used to draw attention to key information, there should only be one instance per screen.
• Highlight - Like accent it is used to draw attention to key information, there can be multiple instances per screen.
• Positive - Should be used to highlight a positive piece of information
• Negative - Should be used to highlight a negative piece of information

Accessibility

Although styles provides a visual indication of the intent this will not be conveyed to customers using assitive technologies. The content or wrapping componet should provide context to what the badge relates to.

If required additional HTML markup can be used to convey intent to assistive technologies.

File Links