Button
‹ BackButton colours
<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
<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.
<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
<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
<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
<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" -%>
<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
<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__cancel__line">Button 1</a> </div> <div> <a href="#" class="button__cancel__line">Button 2</a> </div> <div> <a href="#" class="button__cancel__line">Button 3</a> </div> <div> <a href="#" class="button__cancel">Button 4</a> </div> <div> <a href="#" class="button__confirm__line">Button 5</a> </div> <div> <a href="#" class="button">Button 6</a> </div> <div> <a href="#" class="button">Button 7</a> </div> <div> <a href="#" class="button__secondary">Button 8</a> </div> <div> <a href="#" class="button__line">Button 9</a> </div> <div> <a href="#" class="button__confirm__line">Button 10</a> </div> <div> <a href="#" class="button__line">Button 11</a> </div> <div> <a href="#" class="button__confirm__line">Button 12</a> </div> <div> <a href="#" class="button__confirm__line">Button 13</a> </div> <div> <a href="#" class="button__cancel">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.
<div class="button-sides"> <a href="#" class="button button__back">Back</a> <a href="#" class="button button__forward">Forward</a> </div>