Badges
Documentation and examples for badges, our small count and labeling component.
Contextual variations
Add any preset modifier classes to change the appearance of a badge.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
indigo
pink
purple
theme
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</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-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-indigo">indigo</span>
<span class="badge badge-pink">pink</span>
<span class="badge badge-purple">purple</span>
<span class="badge badge-theme">theme</span>
| Class | Values |
|---|---|
class="badge badge-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Pill badges
Use the .badge-pill modifier class to make badges more rounded.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-primary badge-pill">Primary</span>
<span class="badge badge-secondary badge-pill">Secondary</span>
<span class="badge badge-success badge-pill">Success</span>
<span class="badge badge-danger badge-pill">Danger</span>
<span class="badge badge-warning badge-pill">Warning</span>
<span class="badge badge-info badge-pill">Info</span>
<span class="badge badge-light badge-pill">Light</span>
<span class="badge badge-dark badge-pill">Dark</span>
| Class | Values |
|---|---|
class="badge badge-pill badge-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Outline badges
Use the .badge-outline modifier class to create outline badges.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-primary badge-outline">Primary</span>
<span class="badge badge-secondary badge-outline">Secondary</span>
<span class="badge badge-success badge-outline">Success</span>
<span class="badge badge-danger badge-outline">Danger</span>
<span class="badge badge-warning badge-outline">Warning</span>
<span class="badge badge-info badge-outline">Info</span>
<span class="badge badge-light badge-outline">Light</span>
<span class="badge badge-dark badge-outline">Dark</span>
<span class="badge badge-primary badge-pill badge-outline">Primary</span>
<span class="badge badge-secondary badge-pill badge-outline">Secondary</span>
<span class="badge badge-success badge-pill badge-outline">Success</span>
<span class="badge badge-danger badge-pill badge-outline">Danger</span>
<span class="badge badge-warning badge-pill badge-outline">Warning</span>
<span class="badge badge-info badge-pill badge-outline">Info</span>
<span class="badge badge-light badge-pill badge-outline">Light</span>
<span class="badge badge-dark badge-pill badge-outline">Dark</span>
| Class | Values |
|---|---|
class="badge badge-outline badge-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Soft badges
Create soft badges using .badge-soft-* modifier class.
Primary
Secondary
Success
Danger
Warning
Light
Dark
Info
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-soft-primary">Primary</span>
<span class="badge badge-soft-secondary">Secondary</span>
<span class="badge badge-soft-success">Success</span>
<span class="badge badge-soft-danger">Danger</span>
<span class="badge badge-soft-warning">Warning</span>
<span class="badge badge-soft-light">Light</span>
<span class="badge badge-soft-dark">Dark</span>
<span class="badge badge-soft-info">Info</span>
<span class="badge badge-soft-primary badge-pill">Primary</span>
<span class="badge badge-soft-secondary badge-pill">Secondary</span>
<span class="badge badge-soft-success badge-pill">Success</span>
<span class="badge badge-soft-danger badge-pill">Danger</span>
<span class="badge badge-soft-warning badge-pill">Warning</span>
<span class="badge badge-soft-info badge-pill">Info</span>
<span class="badge badge-soft-light badge-pill">Light</span>
<span class="badge badge-soft-dark badge-pill">Dark</span>
| Class | Values |
|---|---|
class="badge badge-soft-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Link Bages
Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>
<a href="#" class="badge badge-indigo">indigo</a>
<a href="#" class="badge badge-pink">pink</a>
<a href="#" class="badge badge-grey">Grey</a>
<a href="#" class="badge badge-purple">purple</a>
<a href="#" class="badge badge-outline badge-primary">Primary</a>
<a href="#" class="badge badge-outline badge-secondary">Secondary</a>
<a href="#" class="badge badge-outline badge-success">Success</a>
<a href="#" class="badge badge-outline badge-danger">Danger</a>
<a href="#" class="badge badge-outline badge-warning">Warning</a>
<a href="#" class="badge badge-outline badge-info">Info</a>
<a href="#" class="badge badge-outline badge-light">Light</a>
<a href="#" class="badge badge-outline badge-dark">Dark</a>
<a href="#" class="badge badge-outline badge-indigo">indigo</a>
<a href="#" class="badge badge-outline badge-grey">Grey</a>
<a href="#" class="badge badge-outline badge-pink">pink</a>
<a href="#" class="badge badge-outline badge-purple">purple</a>
Sizes
Add any preset modifier classes to change the appearance of a badge. Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
badge
badge-sm
<span class="badge badge-secondary">badge</span>
<span class="badge badge-sm badge-secondary">badge-sm</span>
Badge indicator
Add .badge-indicator to display badge as an indicator.
Priority
Overdue
Upcoming
Completed
Working
Processing
Not Started
Hold
Canceled
<h6>Priority <span class="badge badge-primary badge-indicator"></span></h6>
<h6>Overdue <span class="badge badge-danger badge-indicator"></span></h6>
<h6>Upcoming <span class="badge badge-warning badge-indicator"></span></h6>
<h6>Completed <span class="badge badge-success badge-indicator"></span></h6>
<h6>Working <span class="badge badge-info badge-indicator"></span></h6>
<h6>Processing <span class="badge badge-primary badge-indicator-processing badge-indicator"></span></h6>
<h6>Not Started <span class="badge badge-secondary badge-indicator"></span></h6>
<h6>Hold <span class="badge badge-light badge-indicator"></span></h6>
<h6>Canceled <span class="badge badge-dark badge-indicator"></span></h6>
| Class | Values |
|---|---|
class="badge badge-indicator badge-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Badge with icon
Add any preset modifier classes to change the appearance of a badge. Using the contextual classes on an <a> element quickly provide actionable badges with hover and focus states.
badge
badge sm
<span class="badge badge-primary">
<span>
<span class="icon"><span class="feather-icon"><i data-feather="package"></i></span></span>
badge
</span>
</span>
<span class="badge badge-sm badge-primary">
<span>
<span class="icon"><span class="feather-icon"><i data-feather="package"></i></span></span>
badge sm
</span>
</span>
Badge indicator sizes
Add .badge-indicator to display badge as an indicator.
With border
Without border
<div class="title-sm"><span>With border</span></div>
<span class="badge badge-dark badge-indicator badge-indicator-sm"></span>
<span class="badge badge-dark badge-indicator"></span>
<span class="badge badge-dark badge-indicator badge-indicator-lg"></span>
<span class="badge badge-dark badge-indicator badge-indicator-xl"></span>
<div class="title-sm"><span>Without border</span></div>
<span class="badge badge-dark badge-indicator badge-indicator-nobdr-sm"></span>
<span class="badge badge-dark badge-indicator badge-indicator-nobdr"></span>
Badge with indicator
Use.badge-dot .
badge
badge
<span class="badge badge-primary">
<span>
<svg class="badge-dot" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="8"/>
</svg>badge
</span>
</span>
<span class="badge badge-sm badge-primary">
<span>
<svg class="badge-dot" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="8"/>
</svg>badge
</span>
</span>
Badges with headings
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
h1. Jampack heading New
h2. Jampack heading New
h3. Jampack heading New
h4. Jampack heading New
h5. Jampack heading New
h6. Jampack heading New
<h1>h1. Jampack heading <span class="badge badge-secondary">New</span></h1>
<hr>
<h2>h2. Jampack heading <span class="badge badge-secondary">New</span></h2>
<hr>
<h3>h3. Jampack heading <span class="badge badge-secondary">New</span></h3>
<hr>
<h4>h4. Jampack heading <span class="badge badge-secondary">New</span></h4>
<hr>
<h5>h5. Jampack heading <span class="badge badge-secondary">New</span></h5>
<hr>
<h6>h6. Jampack heading <span class="badge badge-secondary">New</span></h6>
Badge status
Wrap with .badge-status.
Priority
Overdue
Upcoming
Completed
Working
Not Started
Hold
Canceled
<div>
<span class="badge-status">
<span class="badge badge-primary badge-indicator"></span>
<span class="badge-label">Priority</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-danger badge-indicator"></span>
<span class="badge-label">Overdue</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-warning badge-indicator"></span>
<span class="badge-label">Upcoming</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-success badge-indicator"></span>
<span class="badge-label">Completed</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-info badge-indicator"></span>
<span class="badge-label">Working </span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-secondary badge-indicator"></span>
<span class="badge-label">Not Started</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-light badge-indicator"></span>
<span class="badge-label">Hold</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-dark badge-indicator"></span>
<span class="badge-label">Canceled</span>
</span>
</div>
Button badges
Badges can be used as part of links or buttons to provide a counter.
<div>
<span class="badge-status">
<span class="badge badge-primary badge-indicator"></span>
<span class="badge-label">Priority</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-danger badge-indicator"></span>
<span class="badge-label">Overdue</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-warning badge-indicator"></span>
<span class="badge-label">Upcoming</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-success badge-indicator"></span>
<span class="badge-label">Completed</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-info badge-indicator"></span>
<span class="badge-label">Working </span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-secondary badge-indicator"></span>
<span class="badge-label">Not Started</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-light badge-indicator"></span>
<span class="badge-label">Hold</span>
</span>
</div>
<div>
<span class="badge-status">
<span class="badge badge-dark badge-indicator"></span>
<span class="badge-label">Canceled</span>
</span>
</div>