Buttons

General information

Buttons are used to carry out actions. Use them when you should enable or initiate an immediate action within your application e.g. “OK”, ”Save”, ”Continue” or ”Submit.” Read more about buttons in the UX Guidelines.

Use the button classes on an <a>, <button>, or <input> element. Also you can use any of the available button classes to quickly create a styled button: .btn-default or .btn-primary or even to large version of it: .btn-lg

Use the primary (green) button to:

Highlight the primary action in the screen, which shall be the main and/or finalising action
Emphasise either normal buttons, menu buttons or split buttons

Design

Use any of the available button classes to quickly create a styled button. For the default style you can simply add .btn and for the primary style add .btn-primary

Directional buttons

Add .left or .right class together with .btn class for the direction needed.

Use when:

To indicate the direction of a flow, e.g. to go to the next or previous step in a wizard
To indicate the direction in which data will change when an action will take place, e.g. to move data from one grid to another

Sizes - Large buttons

Fancy larger buttons? Add .btn-lg for a larger size.

Active state

Buttons will appear pressed (with a darker background and darker border) when active/selected. This will be applied via .active class, and include the aria-pressed="true" attribute to indicate the state of the element to assistive technologies.

Disabled state

Make buttons look unclickable by adding a custom colour. Add .disabled class on your button or add the disabled attribute to <button> or <input> buttons.

<a> tag don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled

For disabled buttons, that include .disabled class and <a> tag, they should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.

Block button

Create block level buttons, those that span the full width of a parent, by adding .btn-block.

Link buttons, with and without icons, and icon buttons

You can also use .btn-link and .btn-icon. Both will have the height of a default button but won't have the button styling.
Checkout the examples below.

Link button - .btn.btn-link

Icon buttons - .btn.btn-icon

				
<!-- Button classes on a, button or input tags -->
<a class="btn" href="#" role="button">Link</a>

<button type="submit" class="btn">Button</button>

<input type="button" class="btn" value="Input">

<input type="submit" class="btn" value="Submit">

<!-- Default buttons - .btn -->
<button type="button" class="btn">Default</button>

<!-- Primary buttons - .btn.btn-primary -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Directional buttons - .left or .right -->
<button type="button" class="btn left">Default left</button>

<button type="button" class="btn right">Default right</button>

<button type="button" class="btn btn-primary left">Primary left</button>

<button type="button" class="btn btn-primary right">Primary right</button>

<!-- Large buttons - .btn-lg -->
<button type="button" class="btn btn-lg">Default large</button>

<button type="button" class="btn btn-primary btn-lg">Primary large</button>

<!-- Active state on buttons - .active -->
<button type="button" class="btn active" aria-pressed="true">Default active</button>

<button type="button" class="btn btn-primary active" aria-pressed="true">Primary active</button>

<!-- Disabled state on buttons - .disabled -->
<button type="button" class="btn" disabled >Disabled</button>

<button type="button" class="btn disabled" aria-disabled="true">Default disabled</button>

<button type="button" class="btn btn-primary disabled" aria-disabled="true">Primary disabled</button>

<!-- Link buttons - .btn-link -->
<button type="button" class="btn btn-link">Link button</button>

<button type="button" class="btn btn-link">
   <span class="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error"></span>
   Link button with icon
</button>

<button type="button" class="btn btn-link" disabled>Disabled link button</button>

<button type="button" class="btn btn-link disabled">
   <span class="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error"></span>
   Disabled link button with icon
</button>

<!-- Icon button - .btn-icon -->
<button type="button" class="btn btn-icon">
   <span class="vismaicon vismaicon-move-left-circle"></span>
   <span class="sr-only">Icon button with action icon</span>
</button>

<button type="button" class="btn btn-icon disabled">
   <span class="vismaicon vismaicon-filled vismaicon-error"></span>
   <span class="sr-only">Disabled icon button with informative icon</span>
</button>