An official website of the United States Government
Overview
Succinctly display quantifiable information.
Preview
View Kitchen Sink
1
8
11
11
22
99+
Variants
Badges are styled with class="fsa-badge fsa-badge--[VARIANT] fsa-badge--[SIZE]".
- Read-only: use a
<span>element. - Invoke an action: use a
<button>element. - Navigate somewhere: use an
<a>elment.
<span class="fsa-badge">1</span>
<button class="fsa-badge" type="button">1</button>
<a class="fsa-badge" href="/link.html">1</a>
Default
1
<span class="fsa-badge">1</span>
Neutral
8
<span class="fsa-badge fsa-badge--neutral">8</span>
General
11
<span class="fsa-badge fsa-badge--general">11</span>
Alert
11 Bugs Found
<span class="fsa-badge fsa-badge--alert">11</span> Bugs Found
Warning
22 Issues Recorded
<span class="fsa-badge fsa-badge--warning">22</span> Issues Recorded
Success
99+ Feature Updates
<span class="fsa-badge fsa-badge--success">99+</span> Feature Updates
Large
1
8
8
11
22
99+
<div class="fsa-level">
<span class="fsa-badge fsa-badge--large">1</span>
<span class="fsa-badge fsa-badge--large fsa-badge--neutral">8</span>
<span class="fsa-badge fsa-badge--large fsa-badge--general">8</span>
<span class="fsa-badge fsa-badge--large fsa-badge--alert">11</span>
<span class="fsa-badge fsa-badge--large fsa-badge--warning">22</span>
<span class="fsa-badge fsa-badge--large fsa-badge--success">99+</span>
</div>
Extra Large
1
8
8
11
22
99+
<div class="fsa-level">
<span class="fsa-badge fsa-badge--extra-large">1</span>
<span class="fsa-badge fsa-badge--extra-large fsa-badge--neutral">8</span>
<span class="fsa-badge fsa-badge--extra-large fsa-badge--general">8</span>
<span class="fsa-badge fsa-badge--extra-large fsa-badge--alert">11</span>
<span class="fsa-badge fsa-badge--extra-large fsa-badge--warning">22</span>
<span class="fsa-badge fsa-badge--extra-large fsa-badge--success">99+</span>
</div>
Actionable
Badge styles can be applied to nearly any HTML element, defaulting to non-actionable <span> elements as shown above. Below are <a> and <button> elements:
A Anchor
Button
Disabled
<div class="fsa-level">
<a class="fsa-badge" href="/link.html">A</a> Anchor
<button class="fsa-badge" type="button">B</button> Button
<button class="fsa-badge" type="button" disabled="disabled">Z</button> Disabled
</div>
Example: Dark Background
1
8
11
11
22
99+
<div style="background-color: #666;">
<div class="fsa-level">
<span class="fsa-badge">1</span>
<span class="fsa-badge fsa-badge--neutral">8</span>
<span class="fsa-badge fsa-badge--general">11</span>
<span class="fsa-badge fsa-badge--alert">11</span>
<span class="fsa-badge fsa-badge--warning">22</span>
<span class="fsa-badge fsa-badge--success">99+</span>
</div>
</div>
Usage
Use
- If an application requires a notification system with minimal footprint.
- If an application button requires a notification badge within it.
Don’t Use
- Within text paragraphs to indicate something other than a notification.
- With color as the only indicator of variant as this is not Accessible.
General Guidance
- Badges should be used for real-time notifications with minimal footprint.
- See Accessibility Section for more information on color guidelines.