Actions

View Guidelines

Default Button 

<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>

Disabled Button 

<button class="button button--primary" disabled>Disabled Button</button>
<button class="button button--secondary" disabled>Disabled Button</button>

Small Button 

<button class="button button--primary button--small">Small Button</button>
<button class="button button--secondary button--small">Small Button</button>

Large Button 

<button class="button button--primary button--large">Large Button</button>
<button class="button button--secondary button--large">Large Button</button>

Border Button 

<button class="button button--primary button--border">Border Button</button>
<button class="button button--secondary button--border">Border Button</button>

Transparent Button 

<button class="button button--primary button--transparent">Transparent Button</button>
<button class="button button--secondary button--transparent">Transparent Button</button>

Button Color Options 

<button class="button button--blue">Blue Button</button>
<button class="button button--gray">Gray Button</button>
<button class="button button--green">Green Button</button>
<button class="button button--orange">Orange Button</button>
<button class="button button--purple">Purple Button</button>
<button class="button button--red">Red Button</button>
<button class="button button--white">White Button</button>

Border Button Color Options 

<button class="button button--blue button--border">Blue Button</button>
<button class="button button--gray button--border">Gray Button</button>
<button class="button button--green button--border">Green Button</button>
<button class="button button--orange button--border">Orange Button</button>
<button class="button button--purple button--border">Purple Button</button>
<button class="button button--red button--border">Red Button</button>
<button class="button button--white button--border">White Button</button>

Button with Icon 

<!-- Blue Button with Add Icon -->
<button class="button button--primary">
  <i class="dashing-icon dashing-icon--add"></i>
  Button
</button>

<!-- Gray Button with Close Icon -->
<button class="button button--secondary">
  <i class="dashing-icon dashing-icon--close"></i>
  Button
</button>

Border Button with Icon 

<!-- Blue Border Button with Edit Icon -->
<button class="button button--blue button--border">
  <i class="dashing-icon dashing-icon--pencil dashing-icon--blue"></i>
  Button
</button>

<!-- Gray Border Button with Help Icon -->
<button class="button button--gray button--border">
  <i class="dashing-icon dashing-icon--question-filled dashing-icon--gray"></i>
  Button
</button>

Transparent Button with Icon 

<!-- Blue Transparent Button with Search Icon -->
<button class="button button--primary button--transparent">
  <i class="dashing-icon dashing-icon--search dashing-icon--blue"></i>
  Button
</button>

<!-- Gray Transparent Button with New-Tab Icon -->
<button class="button button--secondary button--transparent">
  Button
  <i class="dashing-icon dashing-icon--new-tab flow-opposite"></i>
</button>

Icon Button 

<!-- Blue Icon Button with Add Icon -->
<button class="button button--icon button--primary">
  <i class="dashing-icon dashing-icon--add dashing-icon--white"></i>
</button>

<!-- Red Icon Button with Trash Icon -->
<button class="button button--icon button--red">
  <i class="dashing-icon dashing-icon--trash dashing-icon--white"></i>
</button>

Small Icon Button 

<!-- Small Blue Icon Button with Add Icon -->
<button class="button button--primary button--icon button--icon--small">
  <i class="dashing-icon dashing-icon--add dashing-icon--white"></i>
</button>

<!-- Small Red Icon Button with Trash Icon -->
<button class="button button--red button--icon button--icon--small">
  <i class="dashing-icon dashing-icon--trash dashing-icon--white"></i>
</button>

<!-- Small Transparent Icon Button with Help Icon -->
<button class="button button--transparent button--icon button--icon--small">
  <i class="dashing-icon dashing-icon--question-filled dashing-icon--gray"></i>
</button>

Main Icon Button 

<!-- Blue Main Icon Button with Add Icon -->
<button class="button button--icon button--icon--main button--primary">
  <i class="dashing-icon dashing-icon--add dashing-icon--white"></i>
</button>

Toggle Button 

<!-- Blue Toggle Button -->
<ul class="button-group button-group--blue">
  <li class="button--radio">
    <input type="radio" name="options-blue" id="blue1" checked>
    <label for="blue1" class="button">Left</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-blue" id="blue2">
    <label for="blue2" class="button">Middle</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-blue" id="blue3">
    <label for="blue3" class="button">Right</label>
  </li>
</ul>

Toggle Button · Border Button 

<!-- Green Toggle Border Button -->
<ul class="button-group button-group--green button-group--border">
  <li class="button--radio">
    <input type="radio" name="options-green" id="green1" checked>
    <label for="green1" class="button">Left</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-green" id="green2">
    <label for="green2" class="button">Middle</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-green" id="green3">
    <label for="green3" class="button">Middle</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-green" id="green4">
    <label for="green4" class="button">Middle</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-green" id="green5">
    <label for="green5" class="button">Middle</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-green" id="green6">
    <label for="green6" class="button">Middle</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-green" id="green7">
    <label for="green7" class="button">Right</label>
  </li>
</ul>

Toggle Button · Vertical Button · Border Button 

<!-- Green Toggle Border Button -->
<ul class="button-group button-group--vertical button-group--gray button-group--border">
  <li class="button--radio">
    <input type="radio" name="options-gray" id="toggle-gray1" checked>
    <label for="toggle-gray1" class="button">Top</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-gray" id="toggle-gray2">
    <label for="toggle-gray2" class="button">Middle</label>
  </li>
  <li class="button--radio">
    <input type="radio" name="options-gray" id="toggle-gray3">
    <label for="toggle-gray3" class="button">Bottom</label>
  </li>
</ul>

<!-- Use the "_phone" or "_tablet" option to apply the class specifically to that media size -->
<ul class="button-group button-group--vertical_phone button-group--gray button-group--border">
</ul>

Theme Options 

<!-- Round Button -->
<button class="button button--round">Round Button</button>

<!-- Smooth Button -->
<button class="button button--smooth">Smooth Button</button>

<!-- Square Button -->
<button class="button button--square">Square Button</button>

Global Button Themes

Apply one of the following extendables to apply a button theme your entire project.

// Round Button Theme (Default)
button { @extend %button--round; }

// Smooth Button Theme
button { @extend %button--smooth; }

// Square Button Theme
button { @extend %button--square; }