Skip to main contentCarbon Design System

Button

Color

Primary button

ClassPropertyColor token
.bx--btn--primarytext color$text-on-color
.bx--btn__iconsvg$icon-on-color
.bx--btn--primarybackground-color$button-primary
:hoverbackground-color$button-primary-hover
:activebackground-color$button-primary-active
:focusborder$focus
:focusinset$focus-inset
:disabledbackground-color$button-disabled
:disabledtext color$text-on-color-disabled
:disabledsvg$icon-on-color-disabled
Primary button states and color

Secondary button

ClassPropertyColor token
.bx--btn--secondarytext color$text-on-color
.bx--btn__iconsvg$icon-on-color
.bx--btn--secondarybackground-color$button-secondary
.bx--btn--secondaryborder$button-secondary
:hoverbackground-color$button-secondary-hover
:activebackground-color$button-secondary-active
:focusborder$focus
:focusinset$focus-inset
:disabledbackground-color$button-disabled
:disabledtext color$text-on-color-disabled
:disabledsvg$icon-on-color-disabled
Secondary button states and color

Tertiary button

ClassPropertyColor token
.bx--btn--tertiarytext color$button-tertiary
.bx--btn__iconsvg$button-tertiary
.bx--btn--tertiarybackground-colortransparent
.bx--btn--tertiaryborder$button-tertiary
:hovertext color$text-on-color
:hoversvg$icon-on-color
:hoverbackground-color$button-tertiary-hover
:activebackground-color$button-tertiary-active
:focusbackground-color$button-tertiary-hover
:focusborder$focus
:focusinset$focus-inset
:disabledbackgroundtransparent
:disabledborder$button-disabled
:disabledtext color$text-on-color-disabled
:disabledsvg$icon-on-color-disabled
Tertiary button states and color

Ghost button

ClassPropertyColor token
.bx--btn--ghosttext color$link-primary
.bx--btn__iconsvg$link-primary
.bx--btn--ghostbackground-color–
:hovertext color$link-primary-hover
:hoversvg$link-primary-hover
:hoverbackground-color$background-hover
:activebackground-color$background-active
:focusborder$focus
:disabledtext color$text-disabled
:disabledsvg$icon-disabled
Ghost button states and color

Primary danger button

ClassPropertyColor token
.bx--btn--danger--primarytext color$text-on-color
.bx--btn__iconsvg$icon-on-color
.bx--btn--danger--primarybackground-color$button-danger-primary
:hoverbackground-color$button-danger-hover
:activebackground-color$button-danger-active
:focusborder$focus
:focusinset$focus-inset
:disabledbackground-color$button-disabled
:disabledtext color$text-on-color-disabled
:disabledsvg$icon-on-color-disabled
Primary danger button states and color

Tertiary danger button

ClassPropertyColor token
.bx--btn--danger--tertiarytext color$button-danger-secondary
.bx--btn__iconsvg$button-danger-secondary
.bx--btn--danger--tertiaryborder$button-danger-secondary
:hoverbackground-color$button-danger-hover
:hovertext color$text-on-color
:hoversvg$icon-on-color
:activebackground-color$button-danger-active
:activetext color$text-on-color
:activesvg$icon-on-color
:focusborder$focus
:focusinset$focus-inset
:disabledbackground-color$button-disabled
:disabledtext color$text-on-color-disabled
:disabledsvg$icon-on-color-disabled
Tertiary danger button states and color

Ghost danger button

ClassPropertyColor token
.bx--btn--danger--ghosttext color$button-danger-secondary
.bx--btn__iconsvg$button-danger-secondary
:hoverbackground-color$button-danger-hover
:hovertext color$text-on-color
:hoversvg$icon-on-color
:activebackground-color$button-danger-active
:activetext color$text-on-color
:activesvg$icon-on-color
:focusborder$focus
:focusinset$focus-inset
:disabledbackground-color$button-disabled
:disabledtext color$text-on-color-disabled
:disabledsvg$icon-on-color-disabled
Ghost 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
.bx--btn--expressive16 / 1Regular / 400$body-short-02

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 / 4–
.bx--btn--smpadding-left16 / 1$spacing-05
.bx--btn--smpadding-right64 / 4–
.bx--btn--ghostpadding-left, padding-right16 / 1$spacing-05
.bx--btn__iconmargin-left, margin-right16 / 1$spacing-05
svgsize16 x 16–
.bx--btn--expressive svgsize20 x 20–
: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–

Sizes

There are six button sizes: small, medium, large productive, large expressive, extra large, and 2XL. The large expressive button is used in editorial and digital marketing experiences. See Button sizes on the Usage tab for more information about specific use cases for each button size.

ElementSizeHeight (px / rem)
ButtonSmall32 / 2
Medium40 / 2.5
Large productive48 / 3
Large expressive48 / 3
Full bleed buttonExtra large64 / 4
2xl80 / 5
Button sizes