Sass Customize
in order to edit the Badges you can use the css class to overide the theme or you can edit it with sass src/SCSS/elements/_labels.scss
Standard Badges Labels
in order to use the badge component simply create an element with any tag like a span or hyperlink and give it a class name badge and here you have a small badge component and if you want that badge to fit its parent font size add to it another class named flexible and also you can color the badge with the Standard colors Classrs like the example below.
<a href="#" class="badge">Default Badge</a>
<a href="#" class="badge primary">Primary Badge</a>
<a href="#" class="badge secondary">Secondary Badge</a>
<a href="#" class="badge success">Success Badge</a>
<a href="#" class="badge danger">Danger Badge</a>
<a href="#" class="badge warning">Warning Badge</a>
<a href="#" class="badge info">Info Badge</a>
<a href="#" class="badge gray">Gray Badge</a>
<a href="#" class="badge dark">Dark Badge</a>
<a href="#" class="badge light">Light Badge</a>Rounded Badges Labels
in order to use the badge rounded mode easly add class rounded to the badge component element tag see the example below.
<a href="#" class="badge rounded">Primary Badge</a>Circle Counter Badges Label
in order to use the badge Circle Counter Mode simply Add Class circle and for floating inside any element you can use the floating classes float-start for Floating in The Page Direction left and class float-end for Floating in The Page Direction Reverse right.
<a href="#" class="badge circle">07</a>
<a href="#" class="badge circle primary">38</a>
<!-- • • • in Button Example • • • -->
<a href="#" class="btn tx-uppercase">Circle Badge <span class="badge circle">35</span> </a>
<a href="#" class="btn tx-uppercase dark">Floating Right Circle Badge <span class="badge float-end circle">35</span> </a>Dismissal Badges Labels
the Badges Labels also Support another useful feature that is you can remove the badge with a dismissal/remove icon btn inside of it , all you have to do is give the badge element a class name dismiss then add inside of it a remove btn and got a dismissal badge component.
<span class="badge dismiss">Default Badge <i class="ti-close remove-item"></i></span>
<span class="badge dismiss primary">Primary Badge <i class="ti-close remove-item"></i></span>
<span class="badge dismiss secondary">Secondary Badge <i class="ti-close remove-item"></i></span>Pointing and Outline Badges Labels
<span class="badge pointing-top">Pointing Top</span>
<span class="badge pointing-bottom primary">Pointing Bottom</span>
<span class="badge pointing-start secondary">Pointing Start</span>
<span class="badge pointing-end success">Pointing End</span>
<!-- ••• Outline Pointing ••• -->
<span class="badge outline pointing-top">Outline Pointing Top</span>
<span class="badge outline pointing-bottom primary">Outline Pointing Bottom</span>
<span class="badge outline pointing-start secondary">Outline Pointing Start</span>
<span class="badge outline pointing-end success">Outline Pointing End</span>Tags Mode Badges Labels
<span class="badge tag">Default Tag</span>
<span class="badge tag primary">Primary Tag</span>
<span class="badge tag secondary">Secondary Tag</span>
<span class="badge tag success">Success Tag</span>