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:code
Default
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
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
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
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:code

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:code

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
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:code

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
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:code

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
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>