Customizing Tabstrip

The following table lists the available variables for customization.

Name Type Default value Computed value
$button-border-width 0 0
Description
Width of border around buttons
$button-border-radius $border-radius 2px
Description
Border radius of buttons
$button-padding-x $padding-x
Description
Horizontal padding of buttons
$button-padding-y 8px 8px
Description
Vertical padding of buttons
$tabstrip-bg null null
Description
Background color of tabstrip component
$tabstrip-text inherit inherit
Description
Text color of tabstrip component
$tabstrip-border $component-border map-get($theme, component-border)
Description
Border color of tabstrip component
$tabstrip-item-padding-x 24px 24px
Description
Horizontal padding of tabs
$tabstrip-item-padding-y 14px 14px
Description
Vertical padding of tabs
$tabstrip-item-border-width 0 0
Description
Width of border around of tabs
$tabstrip-item-border-radius 0 0
Description
Border radius of tabs
$tabstrip-item-gap 0 0
Description
Spacing between tabs
$tabstrip-item-bg null null
Description
Background color of tabs
$tabstrip-item-text inherit inherit
Description
Text color of tabs
$tabstrip-item-border null null
Description
Border color of tabs
$tabstrip-item-gradient null null
Description
Background gradient of tabs
$tabstrip-item-hovered-bg null null
Description
Background color of hovered tabs
$tabstrip-item-hovered-text inherit inherit
Description
Text color of hovered tabs
$tabstrip-item-hovered-border null null
Description
Border color of hovered tabs
$tabstrip-item-hovered-gradient null null
Description
Background gradent of hovered tabs
$tabstrip-item-selected-bg null null
Description
Background color of selected tabs
$tabstrip-item-selected-text inherit inherit
Description
Text color of selected tabs
$tabstrip-item-selected-border null null
Description
Border color of selected tabs
$tabstrip-item-selected-gradient null null
Description
Background gradient of selected tabs
$tabstrip-content-padding-x $tabstrip-item-padding-x 24px
Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-y $tabstrip-item-padding-y 14px
Description
Vertical padding of tabstrip content
$tabstrip-content-border-width 0 0
Description
Width of border around tabstrip content
$tabstrip-content-bg transparent transparent
Description
Background color of tabstrip content
$tabstrip-content-text inherit inherit
Description
Text color of tabstrip content
$tabstrip-content-border transparent transparent
Description
Border color of tabstrip content

In this article