Dashboard
Cards & Widgets
Charts
Forms
UI Elements
Tables
Maps
Mailbox
Pages

Buttons

Button styles for actions in forms, dialogs, and more with a handful of variations, sizes, states, and more.

Basic Buttons

Twelve predefined button styles, each serving its own semantic purpose.

Source Code

<button class="btn btn-primary">Primary</button><button class="btn btn-primary active">Active</button><button class="btn btn-primary disabled">Disabled</button>
Outline Buttons

Twelve predefined outline button styles, each serving its own semantic purpose.

Available in all colors same with the button above.

Buttons With Icons

A button variant for basic and outline buttons with additional icons.

Icon Only Buttons

A button variant for using only icons.





Source Code

<a href="#" class="btn btn-primary btn-icon">  <div><i class="fa fa-send"></i></div></a>
Button Groups

Group a series of buttons together on a single line with the button group.

Source Code

<div class="btn-group" role="group" aria-label="Basic example">  <button type="button" class="btn btn-secondary pd-x-25 active">General Settings</button>  <button type="button" class="btn btn-secondary pd-x-25">Privacy Settings</button>  <button type="button" class="btn btn-secondary pd-x-25">Account Settings</button></div>