Badges
Description
A colorful background containing a very small amount of text, ideally no more than 20 characters. Optional icons can be added the left side. There are multiple styles, including pills and dismissable button badges. See examples below.
Definition
Badges can be used to:
- indicate a label for a componenet
- indicate the status of an object
- indicate a count
- when used as a button they can remove search filters
Examples
Default badge
Default
Primary
Secondary
Accent
Success
Danger
Warning
Info
Notice
Light
Dark
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-notice">Notice</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>Default badge with icon
Danger
Warning
Deleted
<span class="badge badge-danger"
><i class="fa-solid fa-circle-exclamation"></i> Danger</span
>
<span class="badge badge-warning"
><i class="fa-solid fa-triangle-exclamation"></i> Warning</span
>
<span class="badge badge-danger"
><i class="fa-solid fa-trash-can"></i> Deleted</span
>Pill Badge
Pill badge
Primary
Secondary
Success
Danger
Warning
Light
Dark
<span class="badge rounded-pill badge-primary">Primary</span>
<span class="badge rounded-pill badge-secondary">Secondary</span>
<span class="badge rounded-pill badge-success">Success</span>
<span class="badge rounded-pill badge-danger">Danger</span>
<span class="badge rounded-pill badge-warning">Warning</span>
<span class="badge rounded-pill badge-light">Light</span>
<span class="badge rounded-pill badge-dark">Dark</span>Counter Badge
Counter badge
12
120
1200
12000
120
12
12
14
<span class="badge badge-counter badge-primary">12</span>
<span class="badge badge-counter badge-secondary">120</span>
<span class="badge badge-counter badge-success">1200</span>
<span class="badge badge-counter badge-danger">12000</span>
<span class="badge badge-counter badge-warning">120</span>
<span class="badge badge-counter badge-light">12</span>
<span class="badge badge-counter badge-dark">12</span>
<span class="badge badge-counter badge-accent">14</span>Button Badge
Used to remove filters in search functions.
<button
class="btn btn-sm btn-light rounded-pill"
aria-label="remove Variable A2">
Variable A2<i class="fa-solid fa-x ms-2"></i>
</button>
<button
class="btn btn-sm btn-dark rounded-pill"
aria-label="remove Variable A2">
Variable A2<i class="fa-solid fa-x ms-2"></i>
</button>
<button
class="btn btn-sm btn-white rounded-pill"
aria-label="remove Variable A2">
Variable A2<i class="fa-solid fa-x ms-2"></i>
</button>Accessibility Considerations
Make sure to provide an aria-label with a clear button title for
screen reader users. If the button removes a variable it should say something
like aria-label="remove Variable A2".
Variables
// badge vars
$badge-font-size: 0.875rem;
$badge-font-weight: 600;
$badge-color: $white; // #fff
$badge-padding-y: 0.5rem;
$badge-padding-x: 0.5rem;
$badge-border-radius: 0.25rem;
$badge-sm-font-size: 0.75rem;
$badge-sm-padding-y: 0.2em;
$badge-sm-padding-x: 0.65em;