Customizing Tabstrip

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$button-border-width00
Description
Width of border around buttons
$button-border-radius$border-radius2px
Description
Border radius of buttons
$button-padding-x$padding-x
Description
Horizontal padding of buttons
$button-padding-y8px8px
Description
Vertical padding of buttons
$tabstrip-bgnullnull
Description
Background color of tabstrip component
$tabstrip-textinheritinherit
Description
Text color of tabstrip component
$tabstrip-border$component-bordermap-get($theme, component-border)
Description
Border color of tabstrip component
$tabstrip-item-padding-x24px24px
Description
Horizontal padding of tabs
$tabstrip-item-padding-y14px14px
Description
Vertical padding of tabs
$tabstrip-item-border-width00
Description
Width of border around of tabs
$tabstrip-item-border-radius00
Description
Border radius of tabs
$tabstrip-item-gap00
Description
Spacing between tabs
$tabstrip-item-bgnullnull
Description
Background color of tabs
$tabstrip-item-textinheritinherit
Description
Text color of tabs
$tabstrip-item-bordernullnull
Description
Border color of tabs
$tabstrip-item-gradientnullnull
Description
Background gradient of tabs
$tabstrip-item-hovered-bgnullnull
Description
Background color of hovered tabs
$tabstrip-item-hovered-textinheritinherit
Description
Text color of hovered tabs
$tabstrip-item-hovered-bordernullnull
Description
Border color of hovered tabs
$tabstrip-item-hovered-gradientnullnull
Description
Background gradent of hovered tabs
$tabstrip-item-selected-bgnullnull
Description
Background color of selected tabs
$tabstrip-item-selected-textinheritinherit
Description
Text color of selected tabs
$tabstrip-item-selected-bordernullnull
Description
Border color of selected tabs
$tabstrip-item-selected-gradientnullnull
Description
Background gradient of selected tabs
$tabstrip-content-padding-x$tabstrip-item-padding-x24px
Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-y$tabstrip-item-padding-y14px
Description
Vertical padding of tabstrip content
$tabstrip-content-border-width00
Description
Width of border around tabstrip content
$tabstrip-content-bgtransparenttransparent
Description
Background color of tabstrip content
$tabstrip-content-textinheritinherit
Description
Text color of tabstrip content
$tabstrip-content-bordertransparenttransparent
Description
Border color of tabstrip content

In this article

Not finding the help you need?