Skip to main contentCarbon Design System

Button

Color

Primary button

ElementPropertyColor token
Labeltext color
$text-on-color
Iconsvg
$icon-on-color
Containerbackground-color
$button-primary
Container:hoverbackground-color
$button-primary-hover
Container:activebackground-color
$button-primary-active
Container:focusborder
$focus
inset
$focus-inset
Container:disabledbackground-color
$button-disabled
Label:disabledtext color
$text-on-color-disabled
Icon:disabledsvg
$icon-on-color-disabled
Primary button states and color

Secondary button

ElementPropertyColor token
Labeltext color
$text-on-color
Iconsvg
$icon-on-color
Containerbackground-color
$button-secondary
Container:hoverbackground-color
$button-secondary-hover
Container:activebackground-color
$button-secondary-active
Container:focusborder
$focus
inset
$focus-inset
Container:disabledbackground-color
$button-disabled
Label:disabledtext color
$text-on-color-disabled
Icon:disabledsvg
$icon-on-color-disabled
Secondary button states and color

Tertiary button

ElementPropertyColor token
Labeltext color
$button-tertiary
Iconsvg
$button-tertiary
Containerbackground-color
transparent
border
$button-tertiary
Label:hovertext color
$text-inverse
Icon:hoversvg
$icon-inverse
Container:hoverbackground-color
$button-tertiary-hover
Label:activetext color
$text-inverse
Icon:activesvg
$icon-inverse
Container:activebackground-color
$button-tertiary-active
Container:focusbackground-color
$button-tertiary-hover
border
$focus
inset
$focus-inset
Container:disabledbackground
transparent
border
$button-disabled
Label:disabledtext color
$text-disabled
Icon:disabledsvg
$icon-disabled
Tertiary button states and color

Ghost button

ElementPropertyColor token
Labeltext color
$link-primary
Iconsvg
$link-primary
Containerbackground-colorTransparent
Label:hovertext color
$link-primary-hover
Icon:hoversvg
$link-primary-hover
Container:hoverbackground-color
$background-hover
Container:activebackground-color
$background-active
Container:focusborder
$focus
Label:disabledtext color
$text-disabled
Label:disabledsvg
$icon-disabled
Ghost button states and color

Ghost button – Icon only


ElementPropertyColor token
Iconsvg
$icon-primary
Containerbackground-colorTransparent
Container:hoverbackground-color
$background-hover
Container:activebackground-color
$background-active
Container:focusborder
$focus
Container:selectedbackground-color
$background-selected
Icon:disabledsvg
$icon-disabled
Icon only ghost button states and color

Primary danger button

ElementPropertyColor token
Labeltext color
$text-on-color
Iconsvg
$icon-on-color
Containerbackground-color
$button-danger-primary
Container:hoverbackground-color
$button-danger-hover
Container:activebackground-color
$button-danger-active
Container:focusborder
$focus
inset
$focus-inset
Container:disabledbackground-color
$button-disabled
Label:disabledtext color
$text-on-color-disabled
Icon:disabledsvg
$icon-on-color-disabled
Primary danger button states and color

Tertiary danger button

ElementPropertyColor token
Labeltext color
$button-danger-secondary
Iconsvg
$button-danger-secondary
Containerborder
$button-danger-secondary
Container:hoverbackground-color
$button-danger-hover
Label:hovertext color
$text-on-color
Icon:hoversvg
$icon-on-color
Container:activebackground-color
$button-danger-active
Label:activetext color
$text-on-color
Icon:activesvg
$icon-on-color
Container:focusborder
$focus
inset
$focus-inset
Container:disabledbackground-color
$button-disabled
Label:disabledtext color
$text-disabled
Icon:disabledsvg
$icon-disabled
Tertiary danger button states and color

Ghost danger button

ElementPropertyColor token
Labeltext color
$button-danger-secondary
Iconsvg
$button-danger-secondary
Container:hoverbackground-color
$button-danger-hover
Label:hovertext color
$text-on-color
Icon:hoversvg
$icon-on-color
Container:activebackground-color
$button-danger-active
Label:activetext color
$text-on-color
Icon:activesvg
$icon-on-color
Container:focusborder
$focus
inset
$focus-inset
Container:disabledbackground-color
$button-disabled
Label:disabledtext color
$text-disabled
Icon:disabledsvg
$icon-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.

ElementFont-size (px/rem)Font-weightType token
Button text14 / 0.875Regular / 400
$body-compact-01
Button text (expressive)16 / 1Regular / 400
$body-compact-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.

ElementPropertypx / remSpacing token
Buttonpadding-left16 / 1
$spacing-05
padding-right64 / 4–
Button:smallpadding-left16 / 1
$spacing-05
padding-right64 / 4–
Ghost buttonpadding-left, padding-right16 / 1
$spacing-05
Icon only buttonmargin-left, margin-right16 / 1
$spacing-05
Iconsvg16 x 16–
Icon: expressive buttonsize20 x 20–
Focusbox-shadow: inset1px–
General button structure

Structure measurements for buttons | px / rem

Recommended

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.

VariantSizeHeight (px / rem)
ButtonSmall32 / 2
Medium40 / 2.5
Large productive48 / 3
Large expressive48 / 3
Full bleed buttonExtra large64 / 4
2xl80 / 5
Button sizes
Edit this page on GitHub
Previous
Button: Usage
Next
Button: Code