Skip to main contentCarbon Design System



Primary button

ClassPropertyColor token
.bx--btn--primarytext color$text-04
:disabledtext color$disabled-03
Primary button states and color

Secondary button

ClassPropertyColor token
.bx--btn--secondarytext color$text-04
:disabledtext color$disabled-03
Secondary button states and color

Tertiary button

ClassPropertyColor token
.bx--btn--tertiarytext color$interactive-03
:hovertext color$text-04
:disabledtext color$disabled-02
Tertiary button states and color

Ghost button

ClassPropertyColor token
.bx--btn--ghosttext color$link-01
:hovertext color$hover-primary-text
:disabledtext color$disabled-02
Ghost button states and color

Danger button

ClassPropertyColor token
.bx--btn--danger--primartext color$text-04
:disabledtext color$disabled-03
Danger button states and color


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


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 / 2$spacing-05
svgsize16 x 16
:focusbox-shadow: inset1px
General button structure

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


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