Button

Color

Primary button

ClassPropertyColor token
.bx--btn--primarytext color$text-04
.bx--btn__iconsvg$icon-03
.bx--btn--primarybackground-color$interactive-01
:hoverbackground-color$hover-primary
:activebackground-color$active-primary
:focusborder$focus
:disabledbackground-color$disabled-02
:disabledtext color$disabled-03

Secondary button

ClassPropertyColor token
.bx--btn--secondarytext color$text-04
.bx--btn__iconsvg$icon-03
.bx--btn--secondarybackground-color$interactive-02
.bx--btn--secondaryborder$interactive-02
:hoverbackground-color$hover-secondary
:activebackground-color$active-secondary
:focusborder$focus
:disabledbackground-color$disabled-02
:disabledtext color$disabled-03

Tertiary button

ClassPropertyColor token
.bx--btn--tertiarytext color$interactive-03
.bx--btn__iconsvg$interactive-03
.bx--btn--tertiarybackground-colortransparent
.bx--btn--tertiaryborder$interactive-03
:hovertext color$text-04
:hoversvg$icon-03
:hoverbackground-color$hover-tertiary
:activebackground-color$active-tertiary
:focusborder$focus
:disabledbackground-color$disabled-02
:disabledtext color$disabled-03

Ghost button

ClassPropertyColor token
.bx--btn--ghosttext color$link-01
.bx--btn__iconsvg$link-01
.bx--btn--ghostbackground-color
:hovertext color$hover-primary-text
:hoversvg$hover-primary-text
:hoverbackground-color$hover-ui
:activebackground-color$active-ui
:focusborder$focus
:disabledtext color$disabled-03

Danger button

ClassPropertyColor token
.bx--btn--danger--primartext color$text-04
.bx--btn__iconsvg$icon-03
.bx--btn--danger--primarybackground-color$support-01
:hoverbackground-color$hover-danger
:activebackground-color$active-danger
:focusborder$focus
:disabledbackground-color$disabled-02
:disabledtext color$disabled-03
Example of a normal primary button

Primary, secondary, and ghost button state examples

Typography

Button text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

ClassFont-size (px/rem)Font-weightType style
.bx--btn14 / 0.875Regular / 400$body-short-01

Structure

A button cannot have any element or text within 16 pixels / 1 rem of its borders. For button groups, the primary button is positioned on the outside of the set, while the secondary button is positioned inside. For a button with a glyph, the space between the button label and the glyph must be greater than or equal to 16 pixels / 1 rem. This is to accommodate for instances where two or more buttons with glyphs appear together.

ClassPropertypx / remSpacing token
.bx--btn--primaryheight48 / 3
.bx--btn--smheight32 / 2
.bx--btn__iconsize16 x 16
.bx--btnpadding-left16 / 1$spacing-05
.bx--btnpadding-right64 / 1
.bx--btn--smpadding-left16 / 1$spacing-05
.bx--btn--smpadding-right64 / 4
.bx--btn__iconmargin-left, margin-right16 / 1$spacing-05
.bx--btn--ghostpadding-left, padding-right16 / 2$spacing-05
Structure for a primary button

Structure measurements for small and regular primary button | px / rem

Structure for a primary button

Spacing measurements for various button types | px / rem

The following specs are not built into any of the button components but are recommended by design as the proper distance between buttons.

AttributePropertypx / remSpacing token
External: buttonmargin1px-
Button pairingsmargin-left, margin-right0