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

» Buttons

Tornado Provide a Predesigned Standard Buttons With Multiple Themes Style.

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.

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

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

Circle Button

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

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