Tornado UI | » Buttons

Standard Buttons

in order to use the button theme simply you can add the class btn to your element tag like [link, button, input-submit] and for coloring the button you can use the tornado color’s classes and you can switch between many sizes lets see the example of each button style we have below.

Default Button Primary Secondary Info Success Danger Warning Gray Dark

<!-- Link Button -->
<a href="#" class="btn default">Default Button</a>

<!-- Button -->
<button class="btn primary">Primary</button>

<!-- Submit Button -->
<input type="submit" class="btn secondary" value="Secondary">

Buttons Sizes

the buttons have x3 Sizes to Switch Between it the default size , and small size , large size

Small Size Default Size Large Size

<!-- Small Button -->
<a href="#" class="btn small">Small Size</a>

<!-- Normal Button -->
<a href="#" class="btn">Default Size</a>

<!-- Large Button -->
<a href="#" class="btn large">Large Size</a>

Outline Theme

in order to apply a outline button you can use the class name outline and it will reverse the colors of the button to the border outline style.

Primary Secondary Info Success Danger Warning Gray Dark

<!-- Button -->
<button class="btn primary outline">Primary</button>

Circle Button

<!-- Button -->
<button class="btn primary circle">01</button>

Button W/ Icon

if you need a button with icon and text tornado provide two classes to do so one is btn-icon to put icon before text and btn-icon-after to put icon after the text.

Button Icon Button Icon Button Icon Button Icon

<!-- Button With icon Before -->
<a href="#" class="btn btn-icon primary ti-briefcase">Button Icon</a>

<!-- Button With icon After -->
<a href="#" class="btn btn-icon-after primary ti-briefcase">Button Icon</a>

Labeled Icon Theme

one more theme for the button with icon is labeled icon theme witch allow you to put an icon an shape of label into the button before or after the text with just adding class name labeled to the button.

Button Icon Button Icon Button Icon Button Icon

<!-- Button With icon Before -->
<a href="#" class="btn btn-icon labeled primary ti-briefcase">Button Icon</a>

<!-- Button With icon After -->
<a href="#" class="btn btn-icon-after labeled primary ti-briefcase">Button Icon</a>

Dropdown Initialize

Tornado provide a method called dropdown that you can use to activate the functionality of Tornado UI Dropdown Button Component the Clickable one but for the Hoverable one there is no need for js just add attribute data-event=”hover” to the dropdown wraper.

Sass Customize

in order to edit the Dropdown Theme you can use the css classes to overide the theme or you can edit it with sass src/SCSS/components/_dropdowns.scss

//======> Import Tornado UI Methods <=======//
import Tornado from './Base/Tornado';

//====> Activate Dropdown Buttons <====//
Tornado.dropdown('.dropdown .dropdown-btn');

//===> Accepts CSS Selector or Object

Dropdown Markup

to create a Dropdown Button that opens a Standard Menu you need to create a wraper with class name .dropdown and inside of it you create your button with addional class name dropdown-btn after the button you create your list with class name dropdown-list see the example below.

<!-- Dropdown Button -->
<div class="dropdown">
    <a href="#" class="dropdown-btn btn default small">Dropdown Example</a>
    <ul class="dropdown-list">
        <li><a href="#">User Profile</a></li>
        .....
    </ul>
</div>

<!-- Hover Dropdown Button -->
<div class="dropdown" data-event="hover">
    <a href="#" class="dropdown-btn btn ti-arrow-down-chevron-light">Dropdown Example</a>
    <ul class="dropdown-list">
        <li><a href="#">User Profile</a></li>
        .....
    </ul>
</div>

Pagination Buttons

in order to create a pagination with tornado all you have to do is create ul list with class name pagination then list your pages link inside li tag and for the activated page or the current page add a class name active or current to the pagination li tag watch the example below

<!-- Pagination -->
<ul class="pagination">
    <li><a href="#" class="ti-arrow-left-c"></a></li>
    <li class="active"><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06</a></li>
    <li><a href="#">07</a></li>
    <li><a href="#">08</a></li>
    <li><a href="#">09</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#" class="ti-arrow-right-c"></a></li>
</ul>

Pagination Separate

if you want your pagination to be like buttons separated with gutter space add class name separate to the pagination ul

<!-- Pagination -->
<ul class="pagination separate">
    <li><a href="#" class="ti-arrow-left-c"></a></li>
    <li class="active"><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06</a></li>
    <li><a href="#">07</a></li>
    <li><a href="#">08</a></li>
    <li><a href="#">09</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#" class="ti-arrow-right-c"></a></li>
</ul>

Pagination Circled

circled pagination show the pagintion items buttons in shape of circle button you can activate this theme by adding class name circles to the pagination ul

<!-- Pagination -->
<ul class="pagination circles">
    <li><a href="#" class="ti-arrow-left-c"></a></li>
    <li class="active"><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06</a></li>
    <li><a href="#">07</a></li>
    <li><a href="#">08</a></li>
    <li><a href="#">09</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#" class="ti-arrow-right-c"></a></li>
</ul>

Colors Classes

Class Name	Element	Description
primary	Button	Coloring Button with The Primary Theme Color.
secondary	Button	Coloring Button with The Secondary Theme Color.
info	Button	Coloring Button with The Info Theme Color.
success	Button	Coloring Button with The Success Theme Color.
danger	Button	Coloring Button with The Danger Theme Color.
warning	Button	Coloring Button with The Warning Theme Color.
gray	Button	Coloring Button with The Gray Theme Color.
dark	Button	Coloring Button with The Dark Theme Color.