Button

Skip to main content

Anatomy

Anatomy Image

Container
Left icon (optional) (optional)
Label

Default Values

Attribute	Token	Value
Container
Padding (Left and Right)	button-padding-x-medium	1rem
Padding (Top and Bottom)	button-padding-y-medium	0.5rem
Border Width	button-border-width	1px
Border Radius	button-radius	3px
Border Color	button-color-border-primary-default	#4dacff
Background Color	button-color-background-primary-default	#4dacff
Label
Font Family	font-control-body-1-font-family	'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Size	font-control-body-1-font-size	1rem
Font Weight	font-control-body-1-font-weight	400
Line Height	font-control-body-1-line-height	calc(20 / 16)
Letter Spacing	font-control-body-1-letter-spacing	0.005em
Text Color	button-color-text-primary	#080c11
Left icon (optional)
Dimension	button-icon-dimension	20px
Margin (Right)	button-icon-margin-right	0.25rem
Fill Color	button-icon-color-fill-primary	#080c11

Kinds

Primary

Default Primary Button

Primary Button with Hover State

Disabled Primary Button

Default

Attribute	Token	Value
Container
Background Color	button-color-background-primary-default	#4dacff
Border Color	button-color-border-primary-default	#4dacff
Label
Text Color	button-color-text-primary	#080c11
Left icon (optional)
Fill Color	button-icon-color-fill-primary	#080c11

Hover

Attribute	Token	Value
Container
Background Color	button-color-background-primary-hover	#92cbff
Border Color	button-color-border-primary-hover	#92cbff

Disabled

Attribute	Token	Value
Container
Opacity	opacity-disabled	40%

Secondary

Default Secondary Button

Secondary Button with Hover State

Disabled Secondary Button

Default

Attribute	Token	Value
Container
Background Color	button-color-background-secondary	#ffffff00
Border Color	button-color-border-secondary-default	#4dacff
Label
Text Color	button-color-text-secondary-default	#4dacff
Left icon (optional)
Fill Color	button-icon-color-fill-secondary-default	#4dacff

Hover

Attribute	Token	Value
Container
Background Color	button-color-background-secondary	#ffffff00
Border Color	button-color-border-secondary-hover	#92cbff
Label
Text Color	button-color-text-secondary-hover	#92cbff
Left icon (optional)
Fill Color	button-icon-color-fill-secondary-hover	#92cbff

Disabled

Attribute	Token	Value
Container
Opacity	opacity-disabled	40%

Borderless

Default Borderless Button

Borderless Button with Hover State

Disabled Borderless Button

Default

Attribute	Token	Value
Container
Background Color	button-color-background-borderless	#ffffff00
Border Color	button-color-border-borderless	#ffffff00
Label
Text Color	button-color-text-borderless-default	#4dacff
Left icon (optional)
Fill Color	button-icon-color-fill-borderless-default	#4dacff

Hover

Attribute	Token	Value
Label
Text Color	button-color-text-borderless-hover	#92cbff
Left icon (optional)
Fill Color	button-icon-color-fill-borderless-hover	#92cbff

Disabled

Attribute	Token	Value
Container
Opacity	opacity-disabled	40%

Sizes

Small Primary Button

Medium Primary Button

Large Primary Button

Small

Attribute	Token	Value
Container
Padding (Left and Right)	button-padding-x-small	1rem
Padding (Top and Bottom)	button-padding-y-small	0.25rem

Medium

Attribute	Token	Value
Container
Padding (Left and Right)	button-padding-x-medium	1rem
Padding (Top and Bottom)	button-padding-y-medium	0.5rem

Large

Attribute	Token	Value
Container
Padding (Left and Right)	button-padding-x-large	1rem
Padding (Top and Bottom)	button-padding-y-large	0.75rem

Icon Only

Small

Attribute	Token	Value
Container
Padding (Left and Right)	button-padding-x-small-icon-only	0.25rem
Padding (Top and Bottom)	button-padding-y-small-icon-only	0.25rem

Medium

Attribute	Token	Value
Container
Padding (Left and Right)	button-padding-x-medium-icon-only	0.5rem
Padding (Top and Bottom)	button-padding-y-medium-icon-only	0.5rem

Large

Attribute	Token	Value
Container
Padding (Left and Right)	button-padding-x-large-icon-only	0.75rem
Padding (Top and Bottom)	button-padding-y-large-icon-only	0.75rem

Focus

Primary Button with Focus State

Attribute	Token	Value
Container
Outline Offset	spacing-focus-default	0.125rem
Outline	color-border-focus-default	#da9ce7

Feedback

Cancel