Badges
Documentation and examples for badges, our small count and labeling component.
Examples
Example
<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>
Pill badges
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.
Example
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
Links
Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
Example
<a href="#" class="badge badge-primary">Primary</a>
<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>
Size
Use .badge-md or .badge-lg modifier classes in order to alter the badge's size from normal to medium to large.
Example
<span class="badge badge-primary">Normal</span>
<span class="badge badge-md badge-primary">Medium</span>
<span class="badge badge-lg badge-primary">Large</span>
<span class="delimiter"></span>
<span class="badge badge-pill badge-success">Normal</span>
<span class="badge badge-md badge-pill badge-success">Medium</span>
<span class="badge badge-lg badge-pill badge-success">Large</span>
Inline with text
Use .badge-md or .badge-lg modifier classes in order to alter the badge's size from normal to medium to large.
Example
<div class="">
<span class="badge badge-inline badge-pill bg-base-1">New</span>
<span>Lorem ipsum dolor sit amet consectetur adipiscing.</span>
</div>
Overlay badges
Use this badge style for absolute positioning on top of elements. You can use any of the pre-defined colors.
Left
Right
Example
<div class="row">
<div class="col-md-4">
<div class="relative">
<img src="path_to_image" class="img-fluid rounded">
<span class="block-ribbon block-ribbon-fixed block-ribbon-left bg-blue">Left</span>
</div>
</div>
<div class="col-md-4">
<div class="relative">
<img src="path_to_image" class="img-fluid rounded">
<span class="block-ribbon block-ribbon-fixed block-ribbon-right bg-green">Right</span>
</div>
</div>
</div>
Cornered badges
Use this badge style for absolute positioning on top of elements. You can use any of the pre-defined colors.
Example
<div class="row">
<div class="col-md-4">
<div class="relative">
<img src="path_to_image" class="img-fluid">
<a href="#" class="badge-corner">
<span class="fa fa-heart"></span>
</a>
</div>
</div>
<div class="col-md-4">
<div class="relative">
<img src="path_to_image" class="img-fluid">
<a href="#" class="badge-corner badge-corner-blue">
<span class="fa fa-heart"></span>
</a>
</div>
</div>
<div class="col-md-4">
<div class="relative">
<img src="path_to_image" class="img-fluid">
<a href="#" class="badge-corner badge-corner-green">
<span class="fa fa-heart"></span>
</a>
</div>
</div>
</div>