Button
#
Colors<div> <button class="button button--primary">Primary</button> <button class="button button--secondary">Secondary</button> <button class="button button--success">Success</button> <button class="button button--info">Info</button> <button class="button button--warning">Warning</button> <button class="button button--danger">Danger</button> <button class="button button--link">Link</button></div>
#
Outline<div> <button class="button button--outline button--primary">Primary</button> <button class="button button--outline button--secondary">Secondary</button> <button class="button button--outline button--success">Success</button> <button class="button button--outline button--info">Info</button> <button class="button button--outline button--warning">Warning</button> <button class="button button--outline button--danger">Danger</button></div>
#
Active<div> <button class="button button--outline button--active button--primary"> Primary </button> <button class="button button--outline button--active button--secondary"> Secondary </button> <button class="button button--outline button--active button--success"> Success </button> <button class="button button--outline button--active button--info"> Info </button> <button class="button button--outline button--active button--warning"> Warning </button> <button class="button button--outline button--active button--danger"> Danger </button> <button class="button button--outline button--active button--link"> Link </button></div>
#
Disabled<div> <button class="button disabled button--primary">Primary</button> <button class="button disabled button--secondary">Secondary</button> <button class="button disabled button--success">Success</button> <button class="button disabled button--info">Info</button> <button class="button disabled button--warning">Warning</button> <button class="button disabled button--danger">Danger</button> <button class="button disabled button--link">Link</button></div>
#
LinksLinks can also be styled as buttons.
<div> <a class="button button--primary" href="#url"> Primary </a> <a class="button button--secondary" href="#url"> Secondary </a> <a class="button button--success" href="#url"> Success </a> <a class="button button--info" href="#url"> Info </a> <a class="button button--warning" href="#url"> Warning </a> <a class="button button--danger" href="#url"> Danger </a> <a class="button button--link" href="#url"> Link </a></div>
#
Sizes<div> <button class="button button--sm button--primary">Small Button</button> <button class="button button--primary">Default Button</button> <button class="button button--lg button--primary">Large Button</button></div>
#
Block<button class="button button--block button--primary">Block Button</button>