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>

Types

There are three types of buttons: default ,rounded and circle action. Rounded button can be created with additional class .btn-rounded. Circle action button should be used only with icons for action buttons asi call etc. and can be created by using additional class .btn-circle. Square action button are essentially same as circle action, but designed to look like square.

Example:

Button Button

Code:

<a class="btn">Button</a>
<a class="btn btn-rounded">Button</a>

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 variations of buttons: default, secondary and flat. Default button is in colors of choosen theme and secondary is gray whatever theme color is. Flat button is basicaly button without colors. Secondary and flat buttons can be created with additional classes like .btn-[secondary/flat].

There are also three aplication color variations of buttons: success, danger and warning. These can be created with additional classes like .btn-[success/danger/warning].

Note

Color variations can be combined with any button types (default/rounded).

Example:

Default

Secondary

Flat

Flat green

Success

Danger

Warning

Mobile

Bordered

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>

<!-- secondary -->
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary active">Secondary</button>
<button type="button" disabled="" class="btn btn-secondary">Secondary</button>

<!-- flat -->
<button type="button" class="btn btn-flat">Flat</button>
<button type="button" class="btn btn-flat active">Flat</button>
<button type="button" disabled="" class="btn btn-flat">Flat</button>

<!-- flat green -->
<button type="button" class="btn btn-flat-green">Flat green</button>
<button type="button" class="btn btn-flat-green active">Flat green</button>
<button type="button" disabled="" class="btn btn-flat-green">Flat green</button>

<!-- success -->
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success active">Success</button>
<button type="button" disabled="" class="btn btn-success">Success</button>

<!-- danger -->
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger active">Danger</button>
<button type="button" disabled="" class="btn btn-danger">Danger</button>

<!-- warning -->
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning active">Warning</button>
<button type="button" disabled="" class="btn btn-warning">Warning</button>

<!-- mobile -->
<button type="button" class="btn btn-mobile">Mobile</button>
<button type="button" class="btn btn-mobile active">Mobile</button>
<button type="button" disabled="" class="btn btn-mobile">Mobile</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 icons and text

Medium icons and text

Buttons with only icons

Code:

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

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

<!-- medium icons and text -->
<button type="button" class="btn btn-rounded">
  <i class="icon icon-m icon-left">download</i> Download
</button>

<button type="button" class="btn btn-secondary"> Settings
  <i class="icon icon-m icon-right">settings</i>
</button>
          
<!-- buttons with only icons -->
<button type="button" class="btn">
  <i class="icon icon-m">home</i>
</button>

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

<button type="button" class="btn btn-flat">
  <i class="icon icon-m ">settings</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>

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>

Note

Button line can contain text information inside .btn-line_text.

Example:

Buttons will stack verticaly for extra small screens.

Text in button line

Code:

<div class="btn-line btn-line-stack-xs"> 
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
  <div class="btn-line_text">Text in button line</div>
  <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">Button</button>
    <button type="button" class="btn">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:

<!-- button groups inline -->
<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>

<!-- button groups vertical -->
<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"> <i class="icon icon-s">home</i></button>
    <button type="button" class="btn"> <i class="icon icon-s">person</i></button>
    <button type="button" class="btn"> <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 and 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. Dropdown list can contain items .dropdown-list_item, special items as headers .dropdown-list_header and dividers with .dropdown-list_divider on list item.

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

Note

you need align dropdown to the right side of button (usefull with smaller buttons such as .btn-dropdown-icon), you can use class .dropdown-list-to-left on dropdown.

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 class="dropdown-list_divider"></li>
    <li><h4 class="dropdown-list_header">Header</h4></li>
    <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 js-toggle disabled="""> Button dropdown
    <i class="icon icon-dropdown">chevrondown</i>
  </button>
  <ul class="dropdown-list">
    ...
  </ul>
</div>

Button dropdown icon

Icon only dropdown button with arrow pointing to icon from dropdown.

Example:

Code:

<div class="btn-dropdown-icon">
  <button type="button" data-target="parent" data-toggle="dropdown" data-toggle-icon="" class="btn btn-flat js-toggle"><i class="icon icon-m">layout</i></button>
  <ul class="dropdown-list">
    <li><a class="dropdown-list_item">Layout 1</a></li>
    <li><a class="dropdown-list_item">Layout 2</a></li>
    <li><a class="dropdown-list_item">Layout 3</a></li>
  </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 disabled">
  <a data-target="parent" data-toggle="dropdown" data-toggle-icon="chevronup" class="btn btn-split-control js-toggle disabled"><i class="icon icon-split">chevrondown</i></a>
  <a class="btn btn-split disabled">Button dropdown</a>
  <ul class="dropdown-list"> ... </ul>
</div>

Buttons

States

Types

Expanding buttons

Colors

Default

Secondary

Flat

Flat green

Success

Danger

Warning

Mobile

Bordered

Icons in buttons

Floating icons

Small icons and text

Medium icons and text

Buttons with only icons

Positioned icons

Layouts

Button line

Button block

Groups and bars

Button groups

Button groups inline

Button groups vertical

Button bars

Dropdown and split buttons

Dropdown buttons

Section 1

Section 2

Section 3

Button dropdown icon

Split buttons