Badges
Badges indicate status, tags, or categories associated with a block of information
Span Badges
These badges are not hoverable. They just indicate status. They do not link to anything or trigger any action. Use span or a without the href attribute.
<div class="badge">Default</div>
<a class="info badge">Information</a>
<div class="success badge">Success</div>
<a class="warning badge">Warning</a>
<div class="error badge">Error</div>Link Badges
These badges are hoverable. Use an a element with href attribute to make the badge hoverable.
<a href="#!" class="badge">Default</a>
<a href="#!" class="info badge">Info</a>
<a href="#!" class="success badge">Success</a>
<a href="#!" class="warning badge">Warning</a>
<a href="#!" class="error badge">Error</a>Rounded badges
Badges can have rounded sides by adding the .rounded class.
<a href="#!" class="rounded badge">Default</a>
<a href="#!" class="rounded info badge">Info</a>
<a href="#!" class="rounded success badge">Success</a>
<a href="#!" class="rounded warning badge">Warning</a>
<a href="#!" class="rounded error badge">Error</a>Outline badges
Badges can be outlined without backgrounds. Add the .outline class to your .badge element.
<a href="#!" class="outline rounded badge">Default</a>
<a href="#!" class="outline rounded info badge">Info</a>
<a href="#!" class="outline rounded success badge">Success</a>
<a href="#!" class="outline rounded warning badge">Warning</a>
<a href="#!" class="outline rounded error badge">Error</a>
<a href="#!" class="outline badge">Default</a>
<a href="#!" class="outline info badge">Info</a>
<a href="#!" class="outline success badge">Success</a>
<a href="#!" class="outline warning badge">Warning</a>
<a href="#!" class="outline error badge">Error</a>