Tornado Provide a Bunch of Small Badges/Counting Labels and Tags Elements That Can Be Useful For Many Situations Inside/Beside Any Other Elements.
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 Classes 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>
in order to use the badge rounded mode easily add class rounded to the badge component element tag see the example below.
<a href="#" class="badge rounded">Primary Badge</a>
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>
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>
<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>
<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>