Badges
Badges are used to display info, statuses, metadata, counts, and so on.
Usage
Use the .badge class to turn an element into a badge.
Coming Soon…
<span class="badge">
Coming Soon...
</span>Colors
You can adjust the color of a badge using the .primary, .secondary, .success, .danger, and .warning classes.
Neutral Primary Secondary Success Danger Warning
<span class="badge">Neutral</span>
<span class="badge primary">Primary</span>
<span class="badge secondary">Secondary</span>
<span class="badge success">Success</span>
<span class="badge danger">Danger</span>
<span class="badge warning">Warning</span>Muted Badges
Use the .muted class to create a more subtle badge. It can be paired with the color classes.
Neutral Primary Secondary Success Danger Warning
<span class="badge muted">Neutral</span>
<span class="badge primary muted">Primary</span>
<span class="badge secondary muted">Secondary</span>
<span class="badge success muted">Success</span>
<span class="badge danger muted">Danger</span>
<span class="badge warning muted">Warning</span>Outline Badges
Use the .outline class to style a badge with a transparent background. It can be paired with the color classes.
Neutral Primary Secondary Success Danger Warning
<span class="badge outline">Neutral</span>
<span class="badge primary outline">Primary</span>
<span class="badge secondary outline">Secondary</span>
<span class="badge success outline">Success</span>
<span class="badge danger outline">Danger</span>
<span class="badge warning outline">Warning</span>Sizes
You can use the .size-* utility classes to adjust the size of your badges.
Default Large Larger Even Larger
<span class="badge primary">Default</span>
<span class="badge secondary size-m">Large</span>
<span class="badge success size-xl">Larger</span>
<span class="badge danger size-2xl">Even Larger</span>Icons
Badges use display: flex-inline and align-items: center. You can include icons and they’ll automatically align with the text.
Beta Feature
<span class="badge warning">
<svg xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/></svg>
Beta Feature
</span>