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>

Links

Links can also be styled as buttons.

Primary Secondary Success Info Warning Danger Link

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