Skip to main contentCarbon Design System

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
Primary button states and color

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
Secondary button states and color

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
:activecolor$inverse-01
:focusbackground-color$interactive-03
:focusborder$focus
:focuscolor$inverse-01
:disabledbackground-color$disabled-02
:disabledtext color$disabled-03
Tertiary button states and color

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
Ghost button states and color

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
Danger button states and color

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--btnpadding-left16 / 1$spacing-05
.bx--btnpadding-right64 / 1
.bx--btn--smpadding-left16 / 1$spacing-05
.bx--btn--smpadding-right64 / 4
.bx--btn--ghostpadding-left, padding-right16 / 2$spacing-05
.bx--btn__iconmargin-left, margin-right16 / 1$spacing-05
svgsize16 x 16
Structure of buttons

Structure measurements for buttons | 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

Sizes

There are three common button sizes: default, inline, and small. Each button type can use any of these three sizes based on need. The fourth button size, full bleed, has a more reserved application and should rarely be used.

Button sizeHeight (px / rem)Use case
Full bleed64 / 4Use when buttons bleed to the edge of a component, like in side panels and modals.
Default48 / 3Use as primary page actions and other standalone actions.
Inline40 / 2.5Use when buttons are paired with input fields.
Small32 / 2Use when there is not enough vertical space for the default sized button.
Button sizes