Documentation of buttons and its variations, including icons in buttons.
There are also button layouts, groups and some extended functionality for dropdown and split buttons.

Files

app/styles/modules/_buttons.scss

Buttons

Buttons are created by using class .btn on any element but it is recommended to use <a>, <button> or <input>.

Example:
Default
Code:
<a class="btn">Button</a>
<button type="button" class="btn">Button</button>
<input value="Button" class="btn" type="submit">
<div class="btn">Button</div>

Types

There are four basic button shapes. Default, radius, rounded and equilateral. You can set shape of button by using class .btn--[radius/round/equal]. Using both .btn--equal and .btn--round on one button creates a circle!

Example:
Code:
<button class="btn" type="button">Default</button>
<button class="btn btn--radius" type="button">Radius</button>
<button class="btn btn--round" type="button">Round</button>
<button class="btn btn--equal" type="button">
  <svg class="icon icon-close " role="img" aria-hidden="true"><use xlink:href="#icon-close"></use></svg>
</button>
<button class="btn btn--equal btn--round" type="button">
  <svg class="icon icon-close " role="img" aria-hidden="true"><use xlink:href="#icon-close"></use></svg>
</button>

States

There are four button states: normal, hover (shows on mousehover), active (onclick), disabled.

Warning

To disable button created with <a> tag you have to use class .is-disabled.

Example:
Code:
<button type="button" class="btn">Normal</button>
<button type="button" class="btn is-active">Active</button>
<button type="button" disabled="" class="btn">Disabled</button>

Sizes

There are three main sizes of buttons: medium (default), large and small. Size is set with additional class like .btn--[large/small].

Example:
Code:
<button type="button" class="btn btn--large">Large</button>
<button type="button" class="btn">Normal</button>
<button type="button" class="btn btn--small">Small</button>

Colors

There are five main buttons color variatons : default, primary, secondary, link and hollow. Color variation on button are set with additional class like .btn--[primary/link].

Example:

Default

Primary

Secondary

Link

Hollow

Code:
<!-- default -->
<button type="button" class="btn">Default</button>
<button type="button" class="btn is-active">Default</button>
<button type="button" disabled="" class="btn">Default</button>

<!-- primary -->
<button type="button" class="btn btn--primary">Primary</button>
<button type="button" class="btn btn--primary is-active">Primary</button>
<button type="button" disabled="" class="btn btn--primary">Primary</button>

<!-- link -->
<button type="button" class="btn btn--link">Link</button>
<button type="button" class="btn btn--link is-active">Link</button>
<button type="button" disabled="" class="btn btn--link">Link</button>

<!-- hollow -->
<button type="button" class="btn btn--hollow">Link</button>
<button type="button" class="btn btn--hollow is-active">Link</button>
<button type="button" disabled="" class="btn btn--hollow">Link</button>

Icons in buttons

Icons are added to button by creating icon element same way as described in icons. There are two ways how to use icons in buttons - inline or positioned.

Floating icons

Inline icons sit in line with text. Classes .icon--left and .icon--right on the icon element add proper spacing.

Example:

Small icon and text

Medium icon and text

Large button and small button

Only icons

Code:
<!-- small icon and text -->
<button type="button" class="btn">
  <svg class="icon icon-download icon--small icon--left" role="img" aria-hidden="true">
    <use xlink:href="#icon-download"></use>
  </svg> Download
</button>

<button type="button" class="btn btn--primary"> Settings
  <svg class="icon icon--settings icon--small icon--right" role="img" aria-hidden="true">
    <use xlink:href="#icon-settings"></use>
  </svg>
</button>

<!-- medium icon and text -->
<button type="button" class="btn btn--primary">
  <svg class="icon icon-download icon--medium icon--left" role="img" aria-hidden="true">
    <use xlink:href="#icon-download"></use>
  </svg> Download
</button>

<button type="button" class="btn"> Settings
  <svg class="icon icon--settings icon--medium icon--right" role="img" aria-hidden="true">
    <use xlink:href="#icon-settings"></use>
  </svg>
</button>

<!-- large and small button -->
<button type="button" class="btn btn--primary btn--small">
  <svg class="icon icon-download icon--small icon--left" role="img" aria-hidden="true">
    <use xlink:href="#icon-download"></use>
  </svg> Download
</button>

<button type="button" class="btn btn--large"> Settings
  <svg class="icon icon--settings icon--medium icon--right" role="img" aria-hidden="true">
    <use xlink:href="#icon-settings"></use>
  </svg>
</button>

<!-- only icons -->
<button type="button" class="btn">
  <svg class="icon icon-home icon--small" role="presentation" aria-label="Home">
    <use xlink:href="#icon-home"></use>
  </svg>
</button>

<button type="button" class="btn btn--primary">
  <svg class="icon icon-facebook icon--medium" role="presentation" aria-label="Facebook">
    <use xlink:href="#icon-facebook"></use>
  </svg>
</button>

<button type="button" class="btn btn--link">
  <svg class="icon icon-edit icon--medium" role="presentation" aria-label="Edit">
    <use xlink:href="#icon-edit"></use>
  </svg>
</button>

Positioned icons

Unlike inline icons, positioned icons are set using classes .btn--icon-left and .btn--icon-right on button element. The icon sits outside regular text area at the side of the button.

Example:
Code:
<button type="button" class="btn btn-full btn--icon-left">
  <svg class="icon icon-chevronleft icon--large" role="img" aria-hidden="true">
    <use xlink:href="#icon-chevronleft"></use>
  </svg>
</button>

<button type="button" class="btn btn--primary btn-full btn--icon-right"> Next
  <svg class="icon icon-chevronright icon--large" role="img" aria-hidden="true">
    <use xlink:href="#icon-chevronright"></use>
  </svg>
</button>

<button type="button" class="btn btn--large btn-full btn--icon-left">
  <svg class="icon icon-chevronleft icon--large" role="img" aria-hidden="true">
    <use xlink:href="#icon-chevronleft"></use>
  </svg>
</button>

<button type="button" class="btn btn--small btn--primary btn-full btn--icon-right"> Next
  <svg class="icon icon-chevronright icon--large" role="img" aria-hidden="true">
    <use xlink:href="#icon-chevronright"></use>
  </svg>
</button>

Layouts

There are two button layouts: horizontal and vertical. Layouts can vary by breakpoint.

Button layout

Button layouts are created by wrapping buttons in .btn-layout--vertical or .btn-layout--horizontal.

You can specify on which breakpoint the default behavior changes by using .btn-layout--[breakpoint]-vertical and .btn-layout--[breakpoint]-horizontal

Note

Horizontal button layout is also compatible with grid horizontal alignment classes. Use them to move your buttons to the center or right of the layout.

Example:

Buttons are stacked vertically by default, on medium screens the layout becomes horizontal and then vertical again on XL.

Code:
<div class="btn-layout--vertical btn-layout--m-horizontal btn-layout--xl-vertical">
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
</div>

Groups

Button groups merge related buttons into more complex components.

Button groups

Button groups are be created by wrapping buttons into .btn-group--horizontal or .btn-group--vertical.

Button groups can change their orientation on breakpoints. Just use .btn-group--[breakpoint]-horizontal and .btn-group--[breakpoint]-vertical.

Note

Horizontal button group is also compatible with grid horizontal alignment classes. Use them to move your buttons to the center or right of the group.

Example:

Button groups horizontal

Button groups vertical

Code:
<div class="btn-group--horizontal">
  <button class="btn" type="button">Button</button>
  <button class="btn" type="button">Button</button>
  <button class="btn" type="button">Button</button>
</div>

<div class="btn-group--horizontal"> ... </div>
<div class="btn-group--horizontal"> ... </div>

<div class="btn-group--vertical">
  <button class="btn" type="button">Button</button>
  <button class="btn" type="button">Button</button>
  <button class="btn" type="button">Button</button>
</div>

<div class="btn-group--vertical"> ... </div>
<div class="btn-group--vertical"> ... </div>