Badge
The tiny count and labelling component.
Badges can indicate notifications, item counts, or other information related to navigation; these small UI elements convey important information at a glance.
<div className="badge success">
<span className="status">
<span>Success!</span>
</div>
.badge {
padding: 0.5em 0.75em;
display: inline-flex;
align-items: center;
gap: 0.5em;
border: 0.0625rem solid var(--neutral-03);
border-radius: var(--rounded-sm);
line-height: 1;
font-size: 1em;
font-weight: 500;
color: var(--neutral-09);
background-color: var(--neutral-01);
transition: border-color 240ms var(--fluid);
.status {
width: 0.75em;
height: 0.75em;
border-radius: 100%;
background-color: var(--neutral-05);
}
&.success {
.status {
background-color: var(--green);
}
}
&:hover {
border-color: var(--neutral-04);
}
}
Success!
Best Practices
- Clearly differentiate the badge from other content;
- Keep badges brief and informative;
- Ensure accessibility with
aria-label
for non-text badges.