Primary buttons

Primary buttons are used to represent the primary call to action on a screen. There are three primary button styles that solve for placement on either a dark or a light background.

There can only be one primary action on a screen.

If there’s more than one distinct option, the primary treatment should be used for the most likely or desired action.

Default

Hover

Focus (if used)

Secondary buttons

Secondary buttons are used for actions that require less focus than primary buttons. There are two secondary buttons styles that solve for placement on a dark or a light background.

Pair with a primary action to convey a less-important or less-encouraged course of action than the primary.

Use for stand-alone actions that are unrelated to the primary action on the page.

Use for actions that are either optional or just less important/encouraged than the primary.

Default

Hover

Focus (if used)

Button sizes and usage

Buttons are available in three sizes: mini, standard, and jumbo.

The mini button is used in dense layouts or when paired with space-compromised components like tables or pricing cards.

Standard is the most commonly used button size.

The jumbo button is used in where we need to emphasize the most dominant call to action.

Bolt mini

Bolt standard

Bolt jumbo

Height:

24px
36px
48px

Radius:

12px
18px
24px

Min-width:

100px
120px
120px

Max-width:

200px
280px
336px

Font-size:

12px
16px
16px

Line-height:

16px
20px
20px

Padding:

20px
24px
28px

Max-characters:

12-14
14-16
14-16
  • Was this Helpful?
  •