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