Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Tags and Badges - Tornado UI

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 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.

Default Badge Primary Badge Secondary Badge Success Badge Danger Badge Warning Badge
<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.

07 38 5 65 40 55 86 90 88 65

Circle Badge 35    Floating Right Circle Badge 35
<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.

Default Badge Primary Badge Secondary Badge Success Badge Danger Badge Warning Badge
<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

Pointing Top Pointing Bottom Pointing Start Pointing End Outline Pointing Top Outline Pointing Bottom Outline Pointing Start Outline Pointing End
<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

Default Tag Primary Tag Secondary Tag Success Tag Danger Tag Warning Tag Info Tag Gray Tag Dark Tag
<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>

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.