Search…
Search…
Badge
Live in Codebase
Badges help people quickly understand information, status and classification. They provide feedback and reinforce trust and security.
AA
WCAG 2.1 accessibility compliant
Badge
Live in Codebase
Badges help people quickly understand information, status and classification. They provide feedback and reinforce trust and security.
AA
WCAG 2.1 accessibility compliant
Badge
Badges help people quickly understand information, status and classification. They provide feedback and reinforce trust and security.
View Figma Designs
View Figma Designs
View Figma Designs
When to use | When not to use |
|---|---|
✅ Use consistent variants and colour patterns to signal importance levels clearly. | ⛔️ Don’t make badges interactive, use the small button variant instead. |
✅ Use to indicate the current status of an item or action. | ⛔️ Don’t create custom alternatives to existing badge variants. |
✅ Use to highlight when something is “draft” or “new”. | ⛔️ Don’t use badges for labelling, categorising, or organising objects; use the tag component instead. |
Anatomy
Element | Description |
|---|---|
| Container of the badge component |
| Label text of the badge component |
Variants
Spacing
Badge uses minimal padding to maintain a compact appearance while ensuring readable text content.
Small
|
|
No external margins - spacing controlled by parent components |
|
Large
|
|
No external margins - spacing controlled by parent components |
|
When to use | When not to use |
|---|---|
✅ Use consistent variants and colour patterns to signal importance levels clearly. | ⛔️ Don’t make badges interactive, use the small button variant instead. |
✅ Use to indicate the current status of an item or action. | ⛔️ Don’t create custom alternatives to existing badge variants. |
✅ Use to highlight when something is “draft” or “new”. | ⛔️ Don’t use badges for labelling, categorising, or organising objects; use the tag component instead. |
Anatomy
Element | Description |
|---|---|
| Container of the badge component |
| Label text of the badge component |
Variants
Spacing
Badge uses minimal padding to maintain a compact appearance while ensuring readable text content.
Small
|
|
No external margins - spacing controlled by parent components |
|
Large
|
|
No external margins - spacing controlled by parent components |
|
When to use | When not to use |
|---|---|
✅ Use consistent variants and colour patterns to signal importance levels clearly. | ⛔️ Don’t make badges interactive, use the small button variant instead. |
✅ Use to indicate the current status of an item or action. | ⛔️ Don’t create custom alternatives to existing badge variants. |
✅ Use to highlight when something is “draft” or “new”. | ⛔️ Don’t use badges for labelling, categorising, or organising objects; use the tag component instead. |
Anatomy
Element | Description |
|---|---|
| Container of the badge component |
| Label text of the badge component |
Variants
Spacing
Badge uses minimal padding to maintain a compact appearance while ensuring readable text content.
Small
|
|
No external margins - spacing controlled by parent components |
|
Large
|
|
No external margins - spacing controlled by parent components |
|
Continue reading
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.