Buttons

Primary & Secondary Buttons

Buttons support hover, focus and disabled states! Also Buttons have 2 additional sizes: btn-sm and btn-micro!

<button class="btn btn-primary">
   PRIMARY BUTTON
</button>

<button class="btn btn-secondary hover">
   SECONDARY BUTTON
</button>

<button class="btn btn-primary btn-sm">
  SMALL BUTTON
</button>

<button class="btn btn-primary btn-micro">
  MICRO BUTTON
</button>

Icons, Groups, Dropdowns

You can easily use icon inside button! Just add class btn-with-icon to your button and btn-with-icon-content class to container for content of your button!

<button class="btn btn-primary btn-with-icon">
  <div class="btn-with-icon-content">
    <i class="ion-android-close ion"></i>
    BUTTON WITH ICON
  </div>
</button>

Also you have a nice dropdown to use! Just add it to your dashboard as in example!

<div class="dropdown d-inline-flex" v-dropdown>
  <button class="btn btn-primary dropdown-toggle theme-toggle " type="button" id="dropdownMenuButton"
          data-toggle="dropdown">
    DROPDOWN
    <i class="ion-chevron-down arrow-down"></i>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="dropdown-menu-content">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</div>

Don't forget to add a nice buttons group!

<div class="btn-toolbar  d-inline-flex" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">Area</button>
    <button type="button" class="btn btn-primary">With</button>
    <button type="button" class="btn btn-primary">Buttons</button>
    <button type="button" class="btn btn-primary">Group</button>
  </div>
</div>

And beautiful rounded button! Simply add rounded-icon class to your button, and icon inside.

<button class="btn btn-primary btn-with-icon rounded-icon">
  <div class="btn-with-icon-content">
    <i class="ion-android-close ion"></i>
  </div>
</button>

Colors

We have nice colors set for buttons! btn-danger, btn-info, btn-dark, btn-warning, btn-success and btn-pale.

<button class="btn btn-danger">
  Dont touch me! I'm HOT!
</button>
<button class="btn btn-info">
  Just some information...
</button>
<button class="btn btn-dark">
  I'm so dark and stylish!
</button>
<button class="btn btn-warning">
  By clicking this button you agree...
</button>
<button class="btn btn-success">
  Pink Is the New Black!
</button>
<button class="btn btn-pale">
  The Pale Emperor
</button>

Find DEMOs here!