HTML
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.
<button type="button" class="btn">Default</button>
Design options
Add the class .btn to construct a default button, to overwrite its default text color use the --button-confirmatory-default-text-default to change it, for the default background color use --button-confirmatory-default-surface-enabled.
Buttons group by the type:
- confirmatory buttons: use .btn or .btn.btn-primary
- destructive button: use .btn.btn-destructive
<button type="button" class="btn btn-destructive">Cancel</button>
Size variant
Add .btn-lg for a larger size.
<button type="button" class="btn btn-lg">Default</button>
Color variant
Add .btn-primary for primary style variant, to overwrite its default text color use the --button-confirmatory-primary-text-default to change it, for the default background color use --button-confirmatory-primary-surface-enabled.
<button type="button" class="btn btn-primary">Primary</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 destructive 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.
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 icons with visual state, with solid and transparent background on normal state
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.
<button type="button" class="btn btn-icon btn-transparent">
<span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-home"></span>
</button>
Shape variants for icon buttons transparent or solid:
- 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>
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>