Badge
A badge should be used to bring a meaningful piece of information out. It may either be textual or numerical. A badge may represent a status or a number of unread notifications for example. Contrary to tags, badges cannot be interactive. And multiple badges are not to be used side by side. A number of variations are suggested here to help you use accessible badges.
Storybook documentations
Example
You can use badges with either text or numbers
7
75
Neutral badge+
<p class="nj-badge">7</p>
<p class="nj-badge">75</p>
<p class="nj-badge">Neutral badge+</p>Size variations
Use the nj-badge--lg modifier for a large badge
7
75
Neutral badge
<p class="nj-badge nj-badge--lg">7</p>
<p class="nj-badge nj-badge--lg">75</p>
<p class="nj-badge nj-badge--lg">Neutral badge</p>Emphasis variations
We provide emphasis modifiers:
- bold (default)
- subtle
- minimal
Bold badge (default)
Subtle badge
Minimal badge
<p class="nj-badge">Bold badge (default)</p>
<p class="nj-badge nj-badge--subtle">Subtle badge</p>
<p class="nj-badge nj-badge--minimal">Minimal badge</p>With icons
Use the nj-badge__icon modifier on a material icon. Make sure to hide it from the sreen-readers and provide full context witht the text.
badge with icon
subtle badge with icon
minimal badge with icon
<p class="nj-badge">
<span aria-hidden="true" class="nj-badge__icon material-icons">outlined_flag</span>
badge with icon
</p>
<p class="nj-badge nj-badge--subtle">
<span aria-hidden="true" class="nj-badge__icon material-icons">outlined_flag</span>
subtle badge with icon
</p>
<p class="nj-badge nj-badge--minimal nj-badge--warning">
<span aria-hidden="true" class="nj-badge__icon material-icons">outlined_flag</span>
minimal badge with icon
</p>Color variations
We provide color modifiers based on the semantic colors:
- neutral (default)
- information
- discovery
- success
- warning
- danger
Neutral badge
Information badge
Discovery badge
Success badge
Warning badge
Danger badge
<p class="nj-badge">Neutral badge</p>
<p class="nj-badge nj-badge--information">Information badge</p>
<p class="nj-badge nj-badge--discovery">Discovery badge</p>
<p class="nj-badge nj-badge--success">Success badge</p>
<p class="nj-badge nj-badge--warning">Warning badge</p>
<p class="nj-badge nj-badge--danger">Danger badge</p>Overview of emphasis and colors variations
Bold (default)
Neutral badge
Information badge
Discovery badge
Success badge
Warning badge
Danger badge
Subtle (default)
Neutral badge
Information badge
Discovery badge
Success badge
Warning badge
Danger badge
Minimal (default)
Neutral badge
Information badge
Discovery badge
Success badge
Warning badge
Danger badge
<p>Bold (default)</p>
<p class="nj-badge">Neutral badge</p>
<p class="nj-badge nj-badge--information">Information badge</p>
<p class="nj-badge nj-badge--discovery">Discovery badge</p>
<p class="nj-badge nj-badge--success">Success badge</p>
<p class="nj-badge nj-badge--warning">Warning badge</p>
<p class="nj-badge nj-badge--danger">Danger badge</p>
<hr>
<p>Subtle (default)</p>
<p class="nj-badge nj-badge--subtle">Neutral badge</p>
<p class="nj-badge nj-badge--subtle nj-badge--information">Information badge</p>
<p class="nj-badge nj-badge--subtle nj-badge--discovery">Discovery badge</p>
<p class="nj-badge nj-badge--subtle nj-badge--success">Success badge</p>
<p class="nj-badge nj-badge--subtle nj-badge--warning">Warning badge</p>
<p class="nj-badge nj-badge--subtle nj-badge--danger">Danger badge</p>
<hr>
<p>Minimal (default)</p>
<p class="nj-badge nj-badge--minimal">Neutral badge</p>
<p class="nj-badge nj-badge--minimal nj-badge--information">Information badge</p>
<p class="nj-badge nj-badge--minimal nj-badge--discovery">Discovery badge</p>
<p class="nj-badge nj-badge--minimal nj-badge--success">Success badge</p>
<p class="nj-badge nj-badge--minimal nj-badge--warning">Warning badge</p>
<p class="nj-badge nj-badge--minimal nj-badge--danger">Danger badge</p>