The badge is a small inline element ideal for data heavy interfaces. It’s useful for drawing attention to the elements near it – for example, as a “New” label or unread count.
Badges are nearly always pinned on another element (i.e., inline). If you’re thinking about using a badge on its own, consider a chip instead.
Vertical alignment — Badges are vertically aligned with the middle of the text surrounding it. While normally this results in correct positioning, it can look odd when badges are followed by non-text elements.
Reduced text size — Badges are best preceded with text that is of size
1 rem. If they are used next to text of other sizes, the badge will look disproportional. (You can resize setting
Medium font weight — To compensate for their reduced text size, badges by default have an increased text weight (medium) to aid readability.
Spacing — When using badges, be mindful of margins. In most cases, you’ll want an x-margin of at least
1rem. (Like all a17t elements, badges specify no margin themselves.)
Badges have full tone and priority support.
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
||color||—||sets background color|
||color||—||sets text color|
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g.,
--color-content) and global
--family-primary) are defined here.