Buttons

A button is designed to grab the user’s attention.

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:

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

Sizes - Large buttons

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

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

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

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


Buttons icons with visual state, with solid and transparent background on normal state

You can use .btn-icon with .btn-solid class for having a button icon design to have the interaction style on it.

Icon button solid bg

Shape variants for icon buttons solid.

Square

Size variants for icon buttons solid. For default size the spirisicon span should contain the .spirisicon-sm class as well.

Default size

Large size

All the variants for icon buttons transparent or solid and there states

Normal

:hover

:focus

:active / Pressed

:disabled

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

Login buttons

Different type of buttons used for login pages.

Default login button .btn-login

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 medium

Normal small

:hover medium

:hover small

:active (Pressed) medium

:active (Pressed) small

:focus medium

:focus small

:disabled medium

:disabled small

Block button

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