Styleguide

Buttons

Design Guidance

Buttons use the Cool Greys palette for priority actions to promote a branded interface. Hired Red is reserved for actions that are highest in priority and should be used sparingly.

On light backgrounds

Primary

Secondary

Inactive

Link

On dark backgrounds

Primary

Secondary

Inactive

Link

Hierarchy

When displayed side-by-side, primary action buttons are always positioned to the right. The secondary action is on the left.

Class Options

Colors

%button.button.button--black Black
%button.button.button--white White
%button.button.button--red Red
%button.button.button--cool-gray-6 Cool Gray 6
%button.button.button--cool-gray-5 Cool Gray 5
%button.button.button--cool-gray-4 Cool Gray 4
%button.button.button--cool-gray-0 Cool Gray 0
%button.button.button--deep-black Deep Black
%button.button.button--medium-gray-1 Medium Gray 1
%button.button{disabled: "disabled"} Disabled
.box
  %button.button.button--link-blue Link Blue
.box.box--black
  %button.button.button--link-white Link White

<button class='button button--black'>Black</button>
<button class='button button--white'>White</button>
<button class='button button--red'>Red</button>
<button class='button button--cool-gray-6'>Cool Gray 6</button>
<button class='button button--cool-gray-5'>Cool Gray 5</button>
<button class='button button--cool-gray-4'>Cool Gray 4</button>
<button class='button button--cool-gray-0'>Cool Gray 0</button>
<button class='button button--deep-black'>Deep Black</button>
<button class='button button--medium-gray-1'>Medium Gray 1</button>
<button class='button' disabled>Disabled</button>
<div class='box'>
  <button class='button button--link-blue'>Link Blue</button>
</div>
<div class='box box--black'>
  <button class='button button--link-white'>Link White</button>
</div>

Sizes

%button.button.button--tiny.button--deep-black Tiny
%button.button.button--small.button--deep-black Small
%button.button.button--deep-black Default
%button.button.button--large.button--deep-black Large

<button class='button button--tiny button--deep-black'>Tiny</button>
<button class='button button--small button--deep-black'>Small</button>
<button class='button button--deep-black'>Default</button>
<button class='button button--large button--deep-black'>Large</button>

Groups

.button-group.xs-mbh0
  %button.button.button--white One button
.button-group.xs-mbh0
  %button.button.button--white Two buttons
  %button.button.button--white Two buttons
.button-group.xs-mbh0
  %button.button.button--white Three buttons
  %button.button.button--white Three buttons
  %button.button.button--white Three buttons
.button-group.xs-mbh0
  %button.button.button--white Four buttons
  %button.button.button--white Four buttons
  %button.button.button--white Four buttons
  %button.button.button--white Four buttons

<div class='button-group xs-mbh0'>
  <button class='button button--white'>One button</button>
</div>
<div class='button-group xs-mbh0'>
  <button class='button button--white'>Two buttons</button>
  <button class='button button--white'>Two buttons</button>
</div>
<div class='button-group xs-mbh0'>
  <button class='button button--white'>Three buttons</button>
  <button class='button button--white'>Three buttons</button>
  <button class='button button--white'>Three buttons</button>
</div>
<div class='button-group xs-mbh0'>
  <button class='button button--white'>Four buttons</button>
  <button class='button button--white'>Four buttons</button>
  <button class='button button--white'>Four buttons</button>
  <button class='button button--white'>Four buttons</button>
</div>