Buttons

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

					

<!-- Default button - .btn -->



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



<!-- Primary button - .btn.btn-primary -->



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



<!-- Link button - .btn.btn-link -->



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



<!-- Link button with icon - .btn.btn-link -->



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



<!-- Icon button without text/label - .btn.btn-icon -->



<button type="button" class="btn btn-icon">
   <span class="vismaicon vismaicon-dynamic vismaicon-add-circle"></span>
   <span class="sr-only">Icon button without text/label</span>
</button>

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

					


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

Sizes - large buttons

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


					


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




<button type="button" class="btn btn-lg left">Default left large button</button>




<button type="button" class="btn btn-lg right">Default right large button</button>




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




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

States

Below you can find each type of button (default and primary) and how it should look for each state (normal, hover, pressed, active/selected and disabled).
For active/selected state you need to add .active class on the element and include the aria-selected="true" attribute to indicate the state of the element to assistive technologies.

Normal

:hover

:active (Pressed)

.active (Selected)

:focus

:disabled

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.

					


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




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

Block button

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

					


<div class="col-4">
   <button type="button" class="btn btn-block">Block level default button</button>
</div>




<div class="col-4">
   <button type="button" class="btn btn-primary btn-block">Block level primary button</button>
</div>




<div class="col-4">
   <button type="button" class="btn btn-lg btn-block">Block level default large button</button>
</div>




<div class="col-4">
   <button type="button" class="btn btn-lg btn-primary btn-block">Block level primary large button</button>
</div>

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


					

<!-- Link button - .btn.btn-link -->



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



<!-- Link button with icon - .btn.btn-link -->



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



<!-- Icon button without text/label - .btn.btn-icon -->



<button type="button" class="btn btn-icon">
   <span class="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error"></span>
   <span class="sr-only">Icon button without text/label</span>
</button>

Login buttons

Different type of buttons used for login pages.

Default login button .btn-login

Secondary login buttons .btn-login-secondary

					

<!-- Default login button - .btn-login -->



<!-- Secondary login button - .btn-login-secondary -->