Figma component
Show the component in Figma
Healthy
Show details
Overview
Key Features
- Colour variants: Available in 10 predefined colours for categorisation.
- Icon replacement: The default icon can be replaced with a custom icon.
- Dismissibility: Can include a close icon to let users remove the badge when needed.
- Accessibility: Fully keyboard navigable and screen-reader accessible.
Anatomy
- Icon: Represents the badge’s purpose or category.
- Label: The main text displaying relevant information, such as a count or status.
-
Dismissible Icon (optional): A close or remove button allowing users to clear the badge when applicable.
Look and Feel
Colors
Offered in a palette of 10 colours, providing versatility for categorisation.
Best Practice
Do
Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
Don't
Use text that wraps into multiple lines; keep it concise and ensure it fits within a single line for better readability and consistency.
Content
Provide small, non-intrusive status indicators or numerical counts. Use sentence case.
Do
Do
Guidelines
- Use single words or short phrases
- Include counts in parentheses when relevant
- No periods
- Avoid unnecessary articles
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.