Button

‹ Back

Button colours

Primary Button on an anchor

Secondary Button

Confirmation Button

Cancel Button 

<p>
  <a href="#" class="button">Primary Button on an anchor</a>
  <button class="button">Primary Button on a button</button>
</p>
<p>
  <a href="#" class="button__secondary">Secondary Button</a>
</p>

<p>
  <a href="#" class="button__confirm">Confirmation Button</a>
</p>

<p>
  <a href="#" class="button__cancel">Cancel Button</a>
</p>

<%= link_to "a.button", "#", class: "button" -%>

Button sizing

Pill button

Small button

Regular button

Large button 

<p>
  <a href="#" class="button button__pill">Pill button</a>
</p>
<p>
  <a href="#" class="button button__small">Small button</a>
</p>
<p>
  <a href="#" class="button">Regular button</a>
</p>
<p>
  <a href="#" class="button button__large">Large button</a>
</p>

<%= link_to "Button", "#", class: "button button__pill" -%>
<%= link_to "Button", "#", class: "button button__small" -%>
<%= link_to "Button", "#", class: "button" -%>
<%= link_to "Button", "#", class: "button button__large" -%>

Disabled buttons

button elements will get disabled styles with the disabled attribute.

Since links can't have that attribute, you can make a link button look disabled with the button__disabled class. The class method is purely decorative so make sure your link does nothing when implementing.

Disabled button class 

<p>
  <a href="" class="button__disabled" onClick="javascript:return false;">Disabled button class</a>
</p>

<p>
  <button type="button" class="button" disabled>Button with disabled attribute</button>
</p>

<%= link_to ".button__disabled", "#", class: "button__disabled" -%>
<%= f.button :button, "Disabled Button", class: "button", disabled: true -%>

Line buttons

Outline Button

Secondary Outline Button

Confirmation Outline Button

Cancel Outline Button 

<p>
  <a href="#" class="button__line">Outline Button</a>
</p>

<p>
  <a href="#" class="button__secondary__line">Secondary Outline Button</a>
</p>

<p>
  <a href="#" class="button__confirm__line">Confirmation Outline Button</a>
</p>

<p>
  <a href="#" class="button__cancel__line">Cancel Outline Button</a>
</p>

<%= link_to ".button__line", "#", class: "button__line" -%>

Button modifiers

Full-width Button

Depressed Button 

<p>
  <a href="#" class="button button__full">Full-width Button</a>
</p>
<p>
  <a href="#" class="button button__depressed">Depressed Button</a>
</p>

<%= link_to ".button.button__full", "#", class: "button button__full" -%>

Icons

Search Search Search

Search Search Search 

<p>
  <a href="#" class="button button__icon-left icon--white">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 24px; height: 24px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>    <span>Search</span>
  </a>
  <a href="#" class="button__confirm button__icon-right icon--white">
    <span>Search</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 24px; height: 24px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>  </a>
  <a href="#" class="button__secondary button__icon-right icon--white">
    <span>Search</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 24px; height: 24px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>  </a>
  <a href="#" class="button__secondary button__icon icon--white">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 24px; height: 24px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>  </a>
</p>
<p>
  <a href="#" class="button button__small button__icon-left icon--white">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 16px; height: 16px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>    <span>Search</span>
  </a>
  <a href="#" class="button__confirm button__small button__icon-left icon--white">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 16px; height: 16px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>    <span>Search</span>
  </a>
  <a href="#" class="button__secondary button__small button__icon-right icon--white">
    <span>Search</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 16px; height: 16px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>  </a>
  <a href="#" class="button__secondary button__small button__icon icon--white">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 16px; height: 16px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>  </a>
</p>

<%= link_to "#{icon("search", width: 16, height: 16)} Search", "#", class: "button button__icon-left icon--white" -%>
<%= link_to "Search #{icon("search", width: 16, height: 16)}", "#", class: "button__confirm button__icon-right icon--white" -%>
<%= link_to "Search #{icon("search", width: 16, height: 16)}", "#", class: "button__secondary button__icon-right icon--white" -%>
<%= link_to icon("search", width: 16, height: 16), "#", class: "button button__icon icon--white" -%>

<%= link_to "#{icon("search", width: 16, height: 16)} Search", "#", class: "button button__small button__icon-left icon--white" -%>
<%= link_to "#{icon("search", width: 16, height: 16)} Search", "#", class: "button__confirm button__small button__icon-right icon--white" -%>
<%= link_to "Search #{icon("search", width: 16, height: 16)}", "#", class: "button__secondary button__small button__icon-right icon--white" -%>
<%= link_to icon("search", width: 16, height: 16), "#", class: "button button__small button__icon icon--white" -%>

Search 

<p>
  <a href="#" class="button button__full">
    <span class="button__icon-left icon--white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 24px; height: 24px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg> <span>Search</span></span>
  </a>
</p>

<%= link_to "#", class: "button button__full" do -%>
  <span class="button__icon-left icon--white">
    <%= icon("search", width: 24, height: 24) -%>
    <span>Search</span>
  </span>
<%- end -%>

Button group

Left Center Right 
<div class="button-group">
  <a href="#" class="button">Left</a>
  <a href="#" class="button">Center</a>
  <a href="#" class="button__secondary">Right</a>
</div>

Button set

These buttons will always have the same gap between eachother, even when they wrap and stack.

<div class="button-set">
  <div>
    <a href="#" class="button__confirm">Button 1</a>
  </div>
  <div>
    <a href="#" class="button__confirm__line">Button 2</a>
  </div>
  <div>
    <a href="#" class="button">Button 3</a>
  </div>
  <div>
    <a href="#" class="button__confirm">Button 4</a>
  </div>
  <div>
    <a href="#" class="button__cancel">Button 5</a>
  </div>
  <div>
    <a href="#" class="button__secondary">Button 6</a>
  </div>
  <div>
    <a href="#" class="button__cancel__line">Button 7</a>
  </div>
  <div>
    <a href="#" class="button__cancel">Button 8</a>
  </div>
  <div>
    <a href="#" class="button__confirm__line">Button 9</a>
  </div>
  <div>
    <a href="#" class="button__secondary">Button 10</a>
  </div>
  <div>
    <a href="#" class="button__cancel__line">Button 11</a>
  </div>
  <div>
    <a href="#" class="button">Button 12</a>
  </div>
  <div>
    <a href="#" class="button__confirm">Button 13</a>
  </div>
  <div>
    <a href="#" class="button__cancel__line">Button 14</a>
  </div>
  <div>
    <a href="#" class="button__cancel__line">Button 15</a>
  </div>
  <div>
    <a href="#" class="button__line">Button 16</a>
  </div>
</div>

Forward and Back buttons

A simple little wrapper that pushes two buttons to either side of the screen.

Back Forward 
<div class="button-sides">
  <a href="#" class="button button__back">Back</a>
  <a href="#" class="button button__forward">Forward</a>
</div>