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 -->
<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
Primary
Delete
Delete
<!-- 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>
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
<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.
Default left large button
Default right large button Primary left large button
Primary right large 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>
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>
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.
Link button - .btn.btn-link
Link button
Disabled link button
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 -->
<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>
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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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
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
Sign in
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
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
<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>