Badges and Tags Labels
Tornado Provide a Bunch of Small Badges/Counting Labels and Tags Elements That Can Be Useful For Many Situations Inside/Beside Any Other Elements.
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 Tornado Folder/SCSS/elements/_labels.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.
Standard Badges Labels
in order to use the badge component simply create an element with any tag like a span or hyperlink and giv 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 colors Class's like the example below.
<span class="badge">Default Badge</span>
<span class="badge primary">Primary Badge</span>
<span class="badge secondary">Secondary Badge</span>
<span class="badge success">Success Badge</span>
<span class="badge danger">Danger Badge</span>
<span class="badge warning">Warning Badge</span>
<span class="badge info">Info Badge</span>
<span class="badge gray">Gray Badge</span>
<span class="badge dark">Dark Badge</span>
<span class="badge light">Light Badge</span>
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.
<span class="badge rounded">Default Badge</span>
Circle Counter Badges Label
in order to use the badge Circle Counter Mode simply Add Class circle and for floating around inside any element you can use the floating class's float-start for Floating in The Page Direction left and class float-end for Floating in The Page Direction Reverse right.
<span class="badge circle">07</span>
<span class="badge circle primary">38</span>
<!-- • • • 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 <i class="ti-close remove-parent"></i> and got your self a dismissal badge component.
<span class="badge dismiss">Default Badge <i class="ti-close remove-parent"></i></span>
<span class="badge dismiss primary">Default Badge <i class="ti-close remove-parent"></i></span>
<span class="badge dismiss secondary">Default Badge <i class="ti-close remove-parent"></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>