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

Design

Use any of the available button classes to quickly create a styled button. On this page you can find multiple types of buttons and the class you need to use for each option:

Standard buttons
Directional buttons
Squerkle buttons
Link buttons
Icon buttons
Login buttons

Options

Standard buttons

Add .btn for default buttons and .btn-primary for primary style. Also you can add .btn-destructive class to a default or primary button to transform it from a confirmatory to a destructive button.

Use the primary 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

Use the destructive button to:

Nullify/delete an action/process
It is not a validation state (has-error state) or cancel

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

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

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

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

<!-- Destructive button - .btn.btn-destructive -->

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

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

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

Sizes - Large buttons

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

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

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

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

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

<!-- Destructive button - .btn.btn-lg.btn-destructive -->

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

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

<button type="button" class="btn btn-primary btn-destructive btn-lg">Primary</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 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>

Squerkle buttons

Add .btn-squerkle class together with .btn class to have a button like the ones from below. To change the background color you can use or background color helper classes and also to change the size you can do that by changing the padding using the helper classes for paddings. Check out the examples below and the code snippets.

** We recommend you to use this buttons on: 48px x 48px, 32px x 32px and 24px x 24px.

Default - .btn.btn-squerkle

.btn.btn-squerkle.bg-secondary

.btn.btn-squerkle.bg-primary

					
<!-- Default squerkle button - 48px x 48px -->

<button type="button" class="btn btn-squerkle p-10">
   <span class="vismaicon vismaicon-dynamic vismaicon-multiselection"></span>
</button>

<!-- Default squerkle button - 32px x 32px -->

<button type="button" class="btn btn-squerkle p-6">
   <span class="vismaicon vismaicon-dynamic vismaicon-multiselection"></span>
</button>

<!-- Default squerkle button - 24px x 24px -->

<button type="button" class="btn btn-squerkle p-2">
   <span class="vismaicon vismaicon-dynamic vismaicon-multiselection"></span>
</button>


<!-- Blue background squerkle button - 48px x 48px -->

<button type="button" class="btn btn-squerkle bg-secondary p-10">
   <span class="vismaicon vismaicon-dynamic vismaicon-bus"></span>
</button>

<!-- Blue background squerkle button - 32px x 32px -->

<button type="button" class="btn btn-squerkle bg-secondary p-6">
   <span class="vismaicon vismaicon-dynamic vismaicon-bus"></span>
</button>

<!-- Blue background squerkle button - 24px x 24px -->

<button type="button" class="btn btn-squerkle bg-secondary p-2">
   <span class="vismaicon vismaicon-dynamic vismaicon-bus"></span>
</button>


<!-- Grey background squerkle button - 48px x 48px -->

<button type="button" class="btn btn-squerkle bg-primary p-10">
   <span class="vismaicon vismaicon-dynamic vismaicon-close"></span>
</button>

<!-- Grey background squerkle button - 32px x 32px -->

<button type="button" class="btn btn-squerkle bg-primary p-6">
   <span class="vismaicon vismaicon-dynamic vismaicon-close"></span>
</button>

<!-- Grey background squerkle button - 24px x 24px -->

<button type="button" class="btn btn-squerkle bg-primary p-2">
   <span class="vismaicon vismaicon-dynamic vismaicon-close"></span>
</button>

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

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

Buttons with transparent background on normal state

You can use .btn-link with .btn-default or .btn-destructive class for having a button link design to have the interaction style of a default or destuctive button.

Default size

Large button - .btn-lg

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

<button type="button" class="btn btn-default btn-link">Button</button>

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

<button type="button" class="btn btn-destructive btn-link">
   <span class="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-delete"></span>
   Delete
</button>

Different type of buttons used for login pages.

Default login button .btn-login

Secondary login buttons .btn-login-secondary

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

<button type="button" class="btn btn-primary btn-lg btn-login">Sign in</button>

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

<button type="submit" class="btn btn-login-secondary">
   <span class="vismaicon vismaicon-google vismaicon-sm mr-8"></span> Sign in with Google
</button>


<button type="submit" class="btn btn-login-secondary">
   <span class="vismaicon vismaicon-visma vismaicon-sm mr-8"></span> Sign in with Visma Connect
</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.

For disabled state (buttons are unclickable) 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.

Normal

:hover

:active (Pressed)

.active (Selected)

:focus

:disabled

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>