Introducing PrimeReact v11-alpha 🎉Discover Now

Tabs Theming

Theming documentation for Tabs component

Styled#

Tabs CSS Classes#

List of class names used in the styled mode.

Design Tokens#

List of design tokens.

tokenCSS Variabledescription
tabs.transition.duration
--p-tabs-transition-duration
Transition duration of root
tabs.tablist.border.width
--p-tabs-tablist-border-width
Border width of tablist
tabs.tablist.background
--p-tabs-tablist-background
Background of tablist
tabs.tablist.border.color
--p-tabs-tablist-border-color
Border color of tablist
tabs.tab.background
--p-tabs-tab-background
Background of tab
tabs.tab.hover.background
--p-tabs-tab-hover-background
Hover background of tab
tabs.tab.active.background
--p-tabs-tab-active-background
Active background of tab
tabs.tab.border.width
--p-tabs-tab-border-width
Border width of tab
tabs.tab.border.color
--p-tabs-tab-border-color
Border color of tab
tabs.tab.hover.border.color
--p-tabs-tab-hover-border-color
Hover border color of tab
tabs.tab.active.border.color
--p-tabs-tab-active-border-color
Active border color of tab
tabs.tab.color
--p-tabs-tab-color
Color of tab
tabs.tab.hover.color
--p-tabs-tab-hover-color
Hover color of tab
tabs.tab.active.color
--p-tabs-tab-active-color
Active color of tab
tabs.tab.padding
--p-tabs-tab-padding
Padding of tab
tabs.tab.font.weight
--p-tabs-tab-font-weight
Font weight of tab
tabs.tab.font.size
--p-tabs-tab-font-size
Font size of tab
tabs.tab.margin
--p-tabs-tab-margin
Margin of tab
tabs.tab.gap
--p-tabs-tab-gap
Gap of tab
tabs.tab.focus.ring.width
--p-tabs-tab-focus-ring-width
Focus ring width of tab
tabs.tab.focus.ring.style
--p-tabs-tab-focus-ring-style
Focus ring style of tab
tabs.tab.focus.ring.color
--p-tabs-tab-focus-ring-color
Focus ring color of tab
tabs.tab.focus.ring.offset
--p-tabs-tab-focus-ring-offset
Focus ring offset of tab
tabs.tab.focus.ring.shadow
--p-tabs-tab-focus-ring-shadow
Focus ring shadow of tab
tabs.tabpanel.background
--p-tabs-tabpanel-background
Background of tabpanel
tabs.tabpanel.color
--p-tabs-tabpanel-color
Color of tabpanel
tabs.tabpanel.padding
--p-tabs-tabpanel-padding
Padding of tabpanel
tabs.tabpanel.focus.ring.width
--p-tabs-tabpanel-focus-ring-width
Focus ring width of tabpanel
tabs.tabpanel.focus.ring.style
--p-tabs-tabpanel-focus-ring-style
Focus ring style of tabpanel
tabs.tabpanel.focus.ring.color
--p-tabs-tabpanel-focus-ring-color
Focus ring color of tabpanel
tabs.tabpanel.focus.ring.offset
--p-tabs-tabpanel-focus-ring-offset
Focus ring offset of tabpanel
tabs.tabpanel.focus.ring.shadow
--p-tabs-tabpanel-focus-ring-shadow
Focus ring shadow of tabpanel
tabs.nav.button.background
--p-tabs-nav-button-background
Background of nav button
tabs.nav.button.color
--p-tabs-nav-button-color
Color of nav button
tabs.nav.button.hover.color
--p-tabs-nav-button-hover-color
Hover color of nav button
tabs.nav.button.width
--p-tabs-nav-button-width
Width of nav button
tabs.nav.button.focus.ring.width
--p-tabs-nav-button-focus-ring-width
Focus ring width of nav button
tabs.nav.button.focus.ring.style
--p-tabs-nav-button-focus-ring-style
Focus ring style of nav button
tabs.nav.button.focus.ring.color
--p-tabs-nav-button-focus-ring-color
Focus ring color of nav button
tabs.nav.button.focus.ring.offset
--p-tabs-nav-button-focus-ring-offset
Focus ring offset of nav button
tabs.nav.button.focus.ring.shadow
--p-tabs-nav-button-focus-ring-shadow
Focus ring shadow of nav button
tabs.nav.button.shadow
--p-tabs-nav-button-shadow
Shadow of nav button
tabs.active.bar.height
--p-tabs-active-bar-height
Height of active bar
tabs.active.bar.bottom
--p-tabs-active-bar-bottom
Bottom of active bar
tabs.active.bar.background
--p-tabs-active-bar-background
Background of active bar

Unstyled#

Theming is implemented with the pass through properties in unstyled mode.