Tabs

Skip to main content

Anatomy

Anatomy Image

Label
Active Indicator

Default

Attribute	Token	Value
Tab
Padding (Left and Right)	tab-padding-x-large	0.75rem
Padding	tab-padding-top-large	1.5rem
Padding	tab-padding-bottom-large	1.75rem
Border Width	tab-border-width-bottom	4px
Label
Text Color	tab-color-text-default	#4dacff
Font Size	font-heading-2-font-size	1.5rem
Font Family	font-heading-2-font-family	'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Weight	font-heading-2-font-weight	400
Line Height	font-heading-2-line-height	calc(28 / 24)
Letter Spacing	font-heading-2-letter-spacing	0em
Body
Padding	card-body-padding	0.5rem

Sizes

Small Tab

Large Tab

Small

Attribute	Token	Value
Tab
Padding (Left and Right)	tab-padding-x-small	0.75rem
Padding	tab-padding-top-small	1rem
Padding	tab-padding-bottom-small	1.25rem

Large

Attribute	Token	Value
Tab
Padding (Left and Right)	tab-padding-x-large	0.75rem
Padding	tab-padding-top-large	1.5rem
Padding	tab-padding-bottom-large	1.75rem

States

Default Tab

Selected Tab

Disabled Tab

Hovered Tab

Focused Tab

Default

Attribute	Token	Value
Tab
Text Color	tab-color-text-default	#4dacff

Hover

Attribute	Token	Value
Tab
Text Color	tab-color-text-hover	#92cbff

Selected

Attribute	Token	Value
Header
Text Color	tab-color-text-selected	#ffffff
Border Color	tab-color-border-bottom-selected	#4dacff

Disabled

Attribute	Token	Value
Tab
Opacity	opacity-disabled	40%

Focus

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

Feedback

Cancel