⬅

Buttons

Buttons

Create a button with a button, input, or a element. Use a disabled attribute when a button shouldn’t be functional.

Link 
<a href="#" class="button">Link</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input">
<input type="button" class="button" value="Disabled" disabled>

Solid Buttons

Add one of the available style modifiers below to change the appearence of a button.

.button--primary .button--secondary .button--alt .button--link 
<!-- Primary button -->
<a href="#" class="button  button--primary">.button--primary</a>

<!-- Secondary button -->
<a href="#" class="button  button--secondary">.button--secondary</a>

<!-- Alt Dark Button -->
<a href="#" class="button  button--alt">.button--alt</a>

<!-- Transparent button that looks like a link -->
<a href="#" class="button  button--link">.button--link</a>

Outlined Buttons

Add the button--outline class to any button to… You guessed it, make it an outline style button.

.button--primary .button--outline .button--secondary .button--outline .button--alt .button--outline
.button--alt .button--outline--inverted 
<!-- Primary button -->
<a href="#" class="button  button--primary  button--outline">.button--primary  .button--outline</a>

<!-- Secondary button -->
<a href="#" class="button  button--secondary  button--outline">.button--secondary  .button--outline</a>

<!-- Alt Dark Button -->
<a href="#" class="button  button--alt  button--outline">.button--alt  .button--outline</a>

<!-- Outline Button -->
<div class="o-box  u-inlineBlock  u-bgGrayDarkest">
  <a href="#" class="button  button--alt  button--outline--inverted">.button--alt  .button--outline--inverted</a>
</div>

button sizes

Add one of the available size modifiers below to change the size of a button.

.button--xl .button--lg .button 
<!-- X-Large button -->
<a href="#" class="button  button--primary  button--xl">.button--xl</a>

<!-- Large button -->
<a href="#" class="button  button--primary  button--lg">.button--lg</a>

<!-- Normal button -->
<a href="#" class="button  button--primary">.button</a>

<!-- Small button -->
<button class="button  button--primary  button--sm">.button--sm</button>

button width

Use size and text utilities u-sizeFull u-txtLeft to make a button full width.

Full Width 
<!-- Full width button button -->
<a href="#" class="button  button--primary  u-sizeFull  u-txtLeft">
  Full Width <i class="icon  icon--arrowRight" aria-hidden="true"></i>
</a>

buttons with icons

Add an icon to a button.

I have an Icon 
<a href="#" class="button  button--primary">
  I have an Icon <i class="icon  icon--arrowRight" aria-hidden="true"></i>
</a>

Button Groups

Button groups and toggle buttons

Button group with `button` elements.

Button group with links

Left Middle Right

Button group with checkbox buttons

Button group with radio buttons

A single toggle checkbox button

<h4>Button group with `button` elements.</h4>
<div class="buttonGroup">
  <button type="button" class="button  button--primary">Left</button>
  <button type="button" class="button  button--primary">Middle</button>
  <button type="button" class="button  button--primary">Right</button>
</div>

<hr class="u-my5">

<h4>Button group with links</h4>
<div class="buttonGroup">
  <a href="#" class="button  button--alt">Left</a>
  <a href="#" class="button  button--alt">Middle</a>
  <a href="#" class="button  button--alt">Right</a>
</div>

<hr class="u-my5">

<h4>Button group with checkbox buttons</h4>
<div class="buttonGroup" data-toggle="buttons">
  <label class="button  button--primary  is-active">
    <input type="checkbox" checked>
    Checkbox 1 (pre-checked)
  </label>
  <label class="button  button--primary">
    <input type="checkbox">
    Checkbox 2
  </label>
  <label class="button  button--primary">
    <input type="checkbox">
    Checkbox 3
  </label>
</div>

<hr class="u-my5">

<h4>Button group with radio buttons</h4>
<div class="buttonGroup" data-toggle="buttons">
  <label class="button  button--secondary  active">
    <input type="radio" name="options" id="option1" checked>
    Checkbox 1 (pre-checked)
  </label>
  <label class="button  button--secondary">
    <input type="radio" name="options" id="option2">
    Checkbox 2
  </label>
  <label class="button  button--secondary">
    <input type="radio" name="options" id="option3">
    Checkbox 3
  </label>
</div>

<hr class="u-my5">

<h4>A single toggle checkbox button</h4>
<button type="button" class="button  button--alt" data-toggle="button">
  Single toggle
</button>

Social Buttons

Social networking buttons

<a class="button  button--social  button--facebook  u-p2" href="">
  <i class="icon  icon--sm  icon--facebook" aria-hidden="true"></i>
</a>

<a class="button  button--social  button--twitter  u-p2" href="">
  <i class="icon  icon--sm  icon--twitter" aria-hidden="true"></i>
</a>

<a class="button  button--social  button--linkedin  u-p2" href="">
  <i class="icon  icon--sm  icon--linkedin" aria-hidden="true"></i>
</a>

<a class="button  button--social  button--youtube  u-p2" href="">
  <i class="icon  icon--sm  icon--youtube" aria-hidden="true"></i>
</a>

<a class="button  button--social  button--instagram  u-p2" href="">
  <i class="icon  icon--sm  icon--instagram" aria-hidden="true"></i>
</a>