Buttons

Documentation of buttons and button variations including icons in buttons and responsive behavior of buttons. There are also explained button layouts, groups and bars and extended functionality for button as dropdown or split dropdown.

Files

app/styles/modules/_buttons.scss

Buttons

Buttons can be 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 .disabled.

Example:

Code:

<button type="button" class="btn">Normal</button>
<button type="button" class="btn 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 can be set with additional class like .btn-[large/small].

Example:

Code:

<button type="button" class="btn btn-large">Large</button>
<button type="button" class="btn">Medium</button>
<button type="button" class="btn btn-small">Small</button>

Expanding buttons

Buttons can be expanded to full width when screen gets smaller by using classes .btn-full-[layout]. Also buttons can be expanded for all screen sizes by using class .btn-full.

Example:

Code:

<button type="button" class="btn btn-full">Expanded</button>
<button type="button" class="btn btn-full-l">L: Expand</button>
<button type="button" class="btn btn-full-m">M: Expand</button>
<button type="button" class="btn btn-full-s">S: Expand</button>
<button type="button" class="btn btn-full-xs">XS: Expand</button>

Colors

There are three main color variatons for buttons: default, primary and link. Color variation on button can be set with additional class like .btn-[primary/link].

Example:

Default

Primary

Link

Code:

<!-- default -->
<button type="button" class="btn">Default</button>
<button type="button" class="btn 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 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 active">Link</button>
<button type="button" disabled="" class="btn btn-link">Link</button>

Icons in buttons

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

Floating icons

Floating icons can be moved to left or right side by adding classes like .icon-left and .icon-right on the icon element.

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">
  <i class="icon icon-s icon-left">download</i> Download
</button>

<button type="button" class="btn btn-primary"> Settings
  <i class="icon icon-s icon-right">settings</i>
</button>
          
<!-- medium icon and text -->
<button type="button" class="btn btn-primary">
  <i class="icon icon-m icon-left">download</i> Download
</button>

<button type="button" class="btn"> Settings
  <i class="icon icon-m icon-right">settings</i>
</button>

<!-- large and small button -->
<button type="button" class="btn btn-primary btn-small">
  <i class="icon icon-s icon-left">download</i> Download
</button>

<button type="button" class="btn btn-large"> Settings
  <i class="icon icon-m icon-right">settings</i>
</button>

<!-- only icons -->
<button type="button" class="btn">
  <i class="icon icon-s">download</i>
</button>

<button type="button" class="btn btn-primary">
  <i class="icon icon-m">settings</i>
</button>

<button type="button" class="btn btn-link">
  <i class="icon icon-m">edit</i>
</button>

Positioned icons

Unlike floating icons, position of icons is set by using classes like .btn-icon-left and .btn-icon-right on button element.

Example:

Code:

<button type="button" class="btn btn-full btn-icon-left">
  <i class="icon icon-s">chevronleft</i> Back
</button>

<button type="button" class="btn btn-primary btn-full btn-icon-right"> Next
  <i class="icon icon-s">chevronright</i>
</button>

<button type="button" class="btn btn-large btn-full btn-icon-left">
  <i class="icon">chevronleft</i> Back
</button>

<button type="button" class="btn btn-small btn-primary btn-full btn-icon-right"> Next
  <i class="icon icon-s">chevronright</i>
</button>

Layouts

There are two main button layouts that can be used: block and inline. Inline layout can be also combined with block layout.

Button line

Line of buttons can be created by wrapping buttons into element with class .btn-line. Buttons can then stack verticaly for small screens by using classes like .btn-line-stack-[layout].

Example:

Buttons will stack verticaly for extra small screens.

Code:

<div class="btn-line btn-line-stack-xs"> 
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
</div>

Button block

Block of buttons can be created by wrapping buttons into element with class .btn-block. There can be also created blocks of button lines same way.

Example:

Code:

<div class="btn-block"> 
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
  <div class="btn-line btn-line-stack-xs"> 
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Button</button>
  </div>
</div>

Groups and bars

Button groups and button bars can be used to merge related buttons into more complex components.

Button groups

Button groups can be created by wrapping buttons into element with class .btn-group. Button groups are by default inline, but if you want to stack them verticaly, you can use additional class .btn-group-stack or .btn-group-stack-full in case you need buttons to expand.

Buttons can also stack depending on screen size by using classes like .btn-group-stack-[layout] and .btn-group-stack-full-[layout].

Example:

Button groups inline

Button groups vertical

Code:

<div class="btn-group btn-group-stack-full-xs">
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
</div>
<div class="btn-group btn-group-stack-full-xs"> ... </div>
<div class="btn-group btn-group-stack-full-xs"> ... </div>

<div class="btn-group btn-group-stack btn-group-stack-full-xs">
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
</div>
<div class="btn-group btn-group-stack btn-group-stack-full-xs"> ... </div>
<div class="btn-group btn-group-stack btn-group-stack-full-xs"> ... </div>

Button bars

Button bars can be created by wrapping button groups into element with class .btn-bar. Button groups in button bars are ordered by default horizontaly but can also stack verticaly by using classes like .btn-bar-stack or .btn-bar-stack-[layout].

Example:

Code:

<div class="btn-bar btn-bar-stack-s">
  <div class="btn-group btn-group-stack-full-xs">
    <button type="button" class="btn">Button</button>
    <button type="button" class="btn">Button</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary"> <i class="icon icon-s">home</i></button>
    <button type="button" class="btn btn-primary"> <i class="icon icon-s">user</i></button>
    <button type="button" class="btn btn-primary"> <i class="icon icon-s">settings</i></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn"><i class="icon icon-s">facebook</i></button>
  </div>
</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.

Warning

Split buttons and dropdowns use toggle.js javascript module. Do not forget tu use class .js-toggle to activate toggle.js. Use attributes like data-target, data-toggle and data-toggle-icon to setup buttons.

Javascript dependency

Split and dropdown button components require toggle.js javascript module: app/scripts/modules/toggle.js. Init in: app/scripts/main.js file.

Dropdown buttons

Button dropdowns can be created by wrapping button and dropdown list into element with class .btn-dropdown. Exact examples are shown below.

Note

Button dropdowns can be also used in button layouts same way as normal buttons. To expand button dropdowns use classes like .btn-dropdown-full or .btn-dropdown-full-[layout].

Warning

Button dropdowns are not supported in button groups and button bars.

Example:

Code:

<div class="btn-dropdown btn-dropdown-full-xs">
  <button type="button" data-target="parent" data-toggle="dropdown" data-toggle-icon="chevronup" class="btn js-toggle"> Button dropdown
    <i class="icon icon-dropdown">chevrondown</i>
  </button>
  <ul class="dropdown-list">
    <li><a class="dropdown-list_item">List item 1</a></li>
    ...
  </ul>
</div>

<div class="btn-dropdown btn-dropdown-full-xs">
  <button type="button" data-target="parent" data-toggle="dropdown" data-toggle-icon="chevronup" class="btn btn-primary btn-large js-toggle"> Button dropdown
    <i class="icon icon-dropdown">chevrondown</i>
  </button>
  <ul class="dropdown-list">
    ...
  </ul>
</div>

<div class="btn-dropdown btn-dropdown-full-xs">
  <button type="button" data-target="parent" data-toggle="dropdown" data-toggle-icon="chevronup" class="btn btn-small js-toggle disabled="""> Button dropdown
    <i class="icon icon-dropdown">chevrondown</i>
  </button>
  <ul class="dropdown-list">
    ...
  </ul>
</div>

Split buttons

Split buttons are basicaly extended dropdown buttons. They can be created same way as dropdowns with additional class .btn-dropdown-split and instead of using one button, you will use two. First button is split control with class .btn-split-control and second is regular button with class .btn-split.

Same as dropdowns, split buttons can expand by using classes like .btn-dropdown-full or .btn-dropdown-full-[layout].

Warning

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

There is an issue with <button> tag and expanding split button, please use <a> tag instead.

Example:

Code:

<div class="btn-dropdown btn-dropdown-split btn-dropdown-full-xs">
  <a data-target="parent" data-toggle="dropdown" data-toggle-icon="chevronup" class="btn btn-split-control js-toggle"><i class="icon icon-split">chevrondown</i>
  </a>
  <a class="btn btn-split">Button dropdown</a>
  <ul class="dropdown-list">
    <li><a class="dropdown-list_item">List item 1</a></li>
    ...
  </ul>
</div>

<div class="btn-dropdown btn-dropdown-split btn-dropdown-full-xs">
  <a data-target="parent" data-toggle="dropdown" data-toggle-icon="chevronup" class="btn btn-primary btn-large btn-split-control js-toggle"><i class="icon icon-split">chevrondown</i></a>
  <a class="btn btn-primary btn-large btn-split">Button dropdown</a>
  <ul class="dropdown-list"> ... </ul>
</div>

<div class="btn-dropdown btn-dropdown-split btn-dropdown-full-xs disabled">
  <a data-target="parent" data-toggle="dropdown" data-toggle-icon="chevronup" class="btn btn-small btn-split-control js-toggle disabled"><i class="icon icon-split">chevrondown</i></a>
  <a class="btn btn-small btn-split disabled">Button dropdown</a>
  <ul class="dropdown-list"> ... </ul>
</div>