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:
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
Primary
Delete
Delete
<!-- Default button - .btn -->
Copy to clipboard
<button type= "button" class= "btn" > Default</button>
<!-- Primary button - .btn.btn-primary -->
Copy to clipboard
<button type= "button" class= "btn btn-primary" > Primary</button>
<!-- Destructive button - .btn.btn-destructive -->
Copy to clipboard
<button type= "button" class= "btn btn-destructive" > Primary</button>
<!-- Primary destructive button - .btn.btn-primary.btn-destructive -->
Copy to clipboard
<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
Primary
Delete
Delete
<!-- Default button - .btn.btn-lg -->
Copy to clipboard
<button type= "button" class= "btn btn-lg" > Default</button>
<!-- Primary button - .btn.btn-lg.btn-primary -->
Copy to clipboard
<button type= "button" class= "btn btn-primary btn-lg" > Primary</button>
<!-- Destructive button - .btn.btn-lg.btn-destructive -->
Copy to clipboard
<button type= "button" class= "btn btn-destructive btn-lg" > Primary</button>
<!-- Primary destructive button - .btn.btn-lg.btn-primary.btn-destructive -->
Copy to clipboard
<button type= "button" class= "btn btn-primary btn-destructive btn-lg" > Primary</button>
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
Default left
Default right
Primary left
Primary right
Copy to clipboard
<button type= "button" class= "btn left" > Default left</button>
Copy to clipboard
<button type= "button" class= "btn right" > Default right</button>
Copy to clipboard
<button type= "button" class= "btn btn-primary left" > Primary left</button>
Copy to clipboard
<button type= "button" class= "btn btn-primary right" > Primary right</button>
Sizes - Large buttons
Fancy larger buttons? Add .btn-lg
for a larger size.
Default left large button
Default right large button
Primary left large button
Primary right large button
Copy to clipboard
<button type= "button" class= "btn btn-lg left" > Default left large button</button>
Copy to clipboard
<button type= "button" class= "btn btn-lg right" > Default right large button</button>
Copy to clipboard
<button type= "button" class= "btn btn-primary btn-lg left" > Primary left large button</button>
Copy to clipboard
<button type= "button" class= "btn btn-primary btn-lg right" > Primary right large button</button>
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 -->
Copy to clipboard
<button type= "button" class= "btn btn-squerkle p-10" >
<span class= "vismaicon vismaicon-dynamic vismaicon-multiselection" > </span>
</button>
<!-- Default squerkle button - 32px x 32px -->
Copy to clipboard
<button type= "button" class= "btn btn-squerkle p-6" >
<span class= "vismaicon vismaicon-dynamic vismaicon-multiselection" > </span>
</button>
<!-- Default squerkle button - 24px x 24px -->
Copy to clipboard
<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 -->
Copy to clipboard
<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 -->
Copy to clipboard
<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 -->
Copy to clipboard
<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 -->
Copy to clipboard
<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 -->
Copy to clipboard
<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 -->
Copy to clipboard
<button type= "button" class= "btn btn-squerkle bg-primary p-2" >
<span class= "vismaicon vismaicon-dynamic vismaicon-close" > </span>
</button>
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
Link button
Link button with icon
Disabled link button
Disabled link button with icon
Icon buttons - .btn.btn-icon
Icon button with informative icon
Icon button with action icon
Icon button with small informative icon
Icon button with small action icon
Disabled icon button with informative icon
Disabled icon button with action icon
Disabled icon button with small informative icon
Disabled icon button with small action icon
<!-- Link button - .btn.btn-link -->
Copy to clipboard
<button type= "button" class= "btn btn-link" > Link button</button>
<!-- Link button with icon - .btn.btn-link -->
Copy to clipboard
<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 -->
Copy to clipboard
<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>
You can use .btn-icon
with .btn-solid
or .btn-transparent
class for having a button icon design to have the interaction style on it.
Icon button 'transparent' bg
Icon button with edit icon and tranparent background
Icon button solid bg
Icon button with edit icon and solid background
<!-- Icon button transparent - .btn.btn-icon.btn-transparent.btn-square -->
Copy to clipboard
<button type= "button" class= "btn btn-icon btn-transparent btn-square" >
<span class= "vismaicon vismaicon-sm vismaicon-dynamic vismaicon-edit" > </span>
</button>
<!-- Icon button solid - .btn.btn-icon.btn-solid.btn-square -->
Copy to clipboard
<button type= "button" class= "btn btn-icon btn-solid btn-square" >
<span class= "vismaicon vismaicon-sm vismaicon-dynamic vismaicon-edit" > </span>
</button>
Shape variants for icon buttons transparent or solid.
Square
Square icon button with edit icon and transparent background
Square icon button with edit icon and solid background
Squircle
Squircle icon button with edit icon and transparent background
Squircle icon button with edit icon and solid background
Round
Round icon button with edit icon and transparent background
Round icon button with edit icon and solid background
<!-- Icon button square - .btn.btn-icon.btn-solid.btn-square -->
Copy to clipboard
<button type= "button" class= "btn btn-icon btn-solid btn-square" >
<span class= "vismaicon vismaicon-sm vismaicon-dynamic vismaicon-edit" > </span>
</button>
<!-- Icon button squircle - .btn.btn-icon.btn-solid.btn-squircle -->
Copy to clipboard
<button type= "button" class= "btn btn-icon btn-solid btn-squircle" >
<span class= "vismaicon vismaicon-sm vismaicon-dynamic vismaicon-edit" > </span>
</button>
<!-- Icon button round - .btn.btn-icon.btn-solid.btn-round -->
Copy to clipboard
<button type= "button" class= "btn btn-icon btn-solid btn-round" >
<span class= "vismaicon vismaicon-sm vismaicon-dynamic vismaicon-edit" > </span>
</button>
Size variants for icon buttons transparent or solid. For default size the vismaicon span should contain the .vismaicon-sm
class as well.
Defaul size
Default icon button size with edit icon and transparent background
Default icon button size with edit icon and solid background
Large size
Large icon button size with edit icon and transparent background
Large icon button size with edit icon and solid background
<!-- Icon button default-size - .btn.btn-icon.btn-solid.btn-square -->
Copy to clipboard
<button type= "button" class= "btn btn-icon btn-solid btn-square" >
<span class= "vismaicon vismaicon-sm vismaicon-dynamic vismaicon-edit" > </span>
</button>
<!-- Icon button large-size - .btn.btn-lg.btn-icon.btn-solid.btn-square -->
Copy to clipboard
<button type= "button" class= "btn btn-lg btn-icon btn-solid btn-square" >
<span class= "vismaicon vismaicon-dynamic vismaicon-edit" > </span>
</button>
All the variants for icon buttons transparent or solid and there states
Normal
Smal/default icon button with edit icon and tranparent background
Large icon button with edit icon and tranparent background
Smal/default squircle icon button with edit icon and tranparent background
Large icon squircle button with edit icon and tranparent background
Smal/default round icon button with edit icon and tranparent background
Large round icon button with edit icon and tranparent background
Smal/default icon button with edit icon and solid background
Large icon button with edit icon and solid background
Smal/default squircle icon button with edit icon and solid background
Large squircle icon button with edit icon and solid background
Smal/default round icon button with edit icon and solid background
Large round icon button with edit icon and solid background
:hover
Smal/default icon button with edit icon and tranparent background on hover state
Large icon button with edit icon and tranparent background on hover state
Smal/default squircle icon button with edit icon and tranparent background on hover state
Large icon squircle button with edit icon and tranparent background on hover state
Smal/default round icon button with edit icon and tranparent background on hover state
Large round icon button with edit icon and tranparent background on hover state
Smal/default icon button with edit icon and solid background on hover state
Large icon button with edit icon and solid background on hover state
Smal/default squircle icon button with edit icon and solid background on hover state
Large squircle icon button with edit icon and solid background on hover state
Smal/default round icon button with edit icon and solid background on hover state
Large round icon button with edit icon and solid background on hover state
:focus
Smal/default icon button with edit icon and tranparent background on focus state
Large icon button with edit icon and tranparent background on focus state
Smal/default squircle icon button with edit icon and tranparent background on focus state
Large icon squircle button with edit icon and tranparent background on focus state
Smal/default round icon button with edit icon and tranparent background on focus state
Large round icon button with edit icon and tranparent background on focus state
Smal/default icon button with edit icon and solid background on focus state
Large icon button with edit icon and solid background on focus state
Smal/default squircle icon button with edit icon and solid background on focus state
Large squircle icon button with edit icon and solid background on focus state
Smal/default round icon button with edit icon and solid background on focus state
Large round icon button with edit icon and solid background on focus state
:active / Pressed
Smal/default icon button with edit icon and tranparent background on pressed state
Large icon button with edit icon and tranparent background on pressed state
Smal/default squircle icon button with edit icon and tranparent background on pressed state
Large icon squircle button with edit icon and tranparent background on pressed state
Smal/default round icon button with edit icon and tranparent background on pressed state
Large round icon button with edit icon and tranparent background on pressed state
Smal/default icon button with edit icon and solid background on pressed state
Large icon button with edit icon and solid background on pressed state
Smal/default squircle icon button with edit icon and solid background on pressed state
Large squircle icon button with edit icon and solid background on pressed state
Smal/default round icon button with edit icon and solid background on pressed state
Large round icon button with edit icon and solid background on pressed state
.active / Selected
Smal/default icon button with edit icon and tranparent background on selected state
Large icon button with edit icon and tranparent background on selected state
Smal/default squircle icon button with edit icon and tranparent background on selected state
Large icon squircle button with edit icon and tranparent background on selected state
Smal/default round icon button with edit icon and tranparent background on selected state
Large round icon button with edit icon and tranparent background on selected state
Smal/default icon button with edit icon and solid background on selected state
Large icon button with edit icon and solid background on selected state
Smal/default squircle icon button with edit icon and solid background on selected state
Large squircle icon button with edit icon and solid background on selected state
Smal/default round icon button with edit icon and solid background on selected state
Large round icon button with edit icon and solid background on selected state
:disabled
Smal/default icon button with edit icon and tranparent background on disabled state
Large icon button with edit icon and tranparent background on disabled state
Smal/default squircle icon button with edit icon and tranparent background on disabled state
Large icon squircle button with edit icon and tranparent background on disabled state
Smal/default round icon button with edit icon and tranparent background on disabled state
Large round icon button with edit icon and tranparent background on disabled state
Smal/default icon button with edit icon and solid background on disabled state
Large icon button with edit icon and solid background on disabled state
Smal/default squircle icon button with edit icon and solid background on disabled state
Large squircle icon button with edit icon and solid background on disabled state
Smal/default round icon button with edit icon and solid background on disabled state
Large round icon button with edit icon and solid background on disabled 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
Button
Delete
Large button - .btn-lg
Button
Delete
<!-- Link button default - .btn.btn-default.btn-link -->
Copy to clipboard
<button type= "button" class= "btn btn-default btn-link" > Button</button>
<!-- Link button destructive with icon - .btn.btn-destructive.btn-link -->
Copy to clipboard
<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
Sign in
Secondary login buttons .btn-login-secondary
<!-- Default login button - .btn-login -->
Copy to clipboard
<button type= "button" class= "btn btn-primary btn-lg btn-login" > Sign in</button>
<!-- Secondary login button - .btn-login-secondary -->
Copy to clipboard
<button type= "submit" class= "btn btn-login-secondary" >
<span class= "vismaicon vismaicon-google vismaicon-sm mr-8" > </span> Sign in with Google
</button>
Copy to clipboard
<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
Default
Primary
Button
Delete
Delete
Delete
:hover
Default
Primary
Button
Delete
Delete
Delete
:active (Pressed)
Default
Primary
Button
Delete
Delete
Delete
.active (Selected)
Default
Primary
Button
:focus
Default
Primary
Button
Delete
Delete
Delete
:disabled
Default
Primary
Button
Delete
Delete
Delete
Create block level buttons, those that span the full width of a parent, by adding .btn-block
.
Block level default button
Block level primary button
Block level default large button
Block level primary large button
Copy to clipboard
<div class= "col-4" >
<button type= "button" class= "btn btn-block" > Block level default button</button>
</div>
Copy to clipboard
<div class= "col-4" >
<button type= "button" class= "btn btn-primary btn-block" > Block level primary button</button>
</div>
Copy to clipboard
<div class= "col-4" >
<button type= "button" class= "btn btn-lg btn-block" > Block level default large button</button>
</div>
Copy to clipboard
<div class= "col-4" >
<button type= "button" class= "btn btn-lg btn-primary btn-block" > Block level primary large button</button>
</div>