Buttons

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/components/buttons/config.scss
app/styles/components/buttons/style.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>

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 : primary, secondary, link and hollow. Color variation on button are set with additional class like .btn--[primary/link/hollow/error/link-gray].

Example:

Default

Hollow

Hollow grey

Link

Link grey

Link black

Error

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>

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

<!-- hollow grey -->
<button type="button" class="btn btn--hollow-grey">Hollow grey</button>
<button type="button" class="btn btn--hollow-grey is-active">Hollow grey</button>
<button type="button" disabled="" class="btn btn--hollow-grey">Hollow grey</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>

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

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

<!-- Error -->
<button type="button" class="btn btn--hollow">Error</button>
<button type="button" class="btn btn--hollow is-active">Error</button>
<button type="button" disabled="" class="btn btn--hollow">Error</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:

Icon and text

Large button and small button

Only icons

Code:

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

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

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

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

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

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

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

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

<button type="button" class="btn btn--link">
  <svg class="icon icon-home icon--medium" role="presentation" aria-label="Edit">
    <use xlink:href="#icon-home"></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>

Buttons with icon showing up on hover

You can use class .btn--icon-showup to get desired effect.

Example:

Code:

<button class="btn btn--link-grey btn--icon-showup">
  Hover me
  //icon
</button>

Pills in buttons

You can also use pill elements inside button, using class .btn--pills on that button.

Example:

Code:

<button class="btn btn--pill">
  <div class="pill">52</div>
  <span>Button with left pill</span>
</button>
<button class="btn btn--pill">
<span>Button with right pill</span>
  <div class="pill pill--right">52</div>
</button>
<button class="btn btn--pill">
  <div class="pill pill--white">52</div>
  <span>Button with mutliple pills</span>
  <div class="pill pill--right">52</div>
  <div class="pill pill--right">4</div>
</button>

Layouts

There are two button layouts: horizontal and vertical.

Button layout

Button layouts are created by wrapping buttons in .btn-layout--vertical or .btn-layout--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.

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

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>

Dropdown and split buttons

Dropdown and split buttons are custom button components with extended functionality. While dropdowns provide extended options of action in dropdown menu, split buttons have these options separated from main action into second part of button.

Note

Dropdown and split buttons uses Dropdown component.

Warning

Split buttons and dropdowns use Toggle.js javascript module. Do not forget tu use attribute [data-toggle] to activate toggle functionality. Use attributes other like data-toggle-icon and data-toggle-expand to setup buttons.

Javascript dependency

Split and dropdown button components require:
Toggle javascript module:app/scripts/modules/Toggle.js.
Initialized by default in: app/scripts/main.js file.

Dropdown buttons

Dropdown buttons are created by wrapping button and dropdown list into element with class .btn-dropdown. Exact examples are shown below.

Note

Dropdown buttons are also used in button layouts same way as normal buttons.

Warning

Dropdown buttons are not supported in button groups.

Example:

Code:

<div class="btn-dropdown">
  <button
    class="btn"
    data-toggle="self, next" data-toggle-icon="#icon-chevronup"
    data-toggle-expand
    aria-haspopup="true"
  >Button<svg class="icon icon-chevrondown icon--right" role="img" aria-hidden="true">
    ...
  </button>
  <div class="dropdown" data-dropdown data-toggle-expand>
    ...
  </div>
</div>

<div class="btn-dropdown">
  <button
    class="btn btn--primary btn--large"
    data-toggle="self, next"
    data-toggle-icon="#icon-chevronup"
    data-toggle-expand
    aria-haspopup="true"
  >Button<svg class="icon icon-chevrondown icon--right" role="img" aria-hidden="true">
    ...
  </button>
  <div class="dropdown" data-dropdown data-toggle-expand>
    ...
  </div>
</div>

<div class="btn-dropdown">
  <button
    class="btn--small"
    disabled
    data-toggle="self, next"
    data-toggle-icon="#icon-chevronup"
    data-toggle-expand
    aria-haspopup="true"
  >Button<svg class="icon icon-chevrondown icon--right" role="img" aria-hidden="true">
    ...
  </button>
  <div class="dropdown" data-dropdown data-toggle-expand>
    ...
  </div>
</div>

Split buttons

Split buttons are basicaly extended dropdown buttons. They are created the same way as dropdowns, but using the call .btn-dropdown-split and instead of using one button, you will use two.

Warning

Split buttons are not supported in button groups and button bars.

Example:

Code:

<div class="btn-dropdown-split">
  <button class="btn">Button</button>
  <button
    class="btn btn--equal"
    data-toggle="self, next, parent" data-toggle-icon="#icon-chevronup"
    data-toggle-expand
    aria-haspopup="true"
  >
    ...
  </button>
  <div class="dropdown" data-toggle-expand>
  ...
  </div>
</div>

<div class="btn-dropdown-split">
  <button class="btn btn--large">Button</button>
  <button
    class="btn btn--large"
    data-toggle="self, next, parent"
    data-toggle-icon="#icon-chevronup"
    data-toggle-expand
    aria-haspopup="true"
  >
    ...
  </button>
  <div class="dropdown" data-toggle-expand>
  ...
  </div>
</div>

<div class="btn-dropdown-split is-disabled">
  <button class="btn btn--small" disabled>Button</button>
  <button
    class="btn btn--small"
    disabled data-toggle="self, next, parent"
    data-toggle-icon="#icon-chevronup"
    data-toggle-expand
    aria-haspopup="true"
  >
    ...
  </button>
  <div class="dropdown" data-toggle-expand>
  ...
  </div>
</div>

Closable buttons

Closable buttons contain a nested button with just an icon. Usually a close icon.

Example:

Button

Code:

<div class="btn-closable">
  <button class="btn">...</button>
  <button class="btn">x</button>
</div>

<div class="btn-closable">
  <button class="btn--large">...</button>
  <button class="btn">x</button>
</div>