React

Tabs

Tabs are used to present a set on tabs for organizing content on a page. It must always be used together with a tab content component.

ExamplesPropsCSS Variables

Examples

Basic

Tab 1 section

Children mounting on click

Tab 1 section

Unmounting invisible children

Tab 1 section

Scroll buttons primary

Tab 1 section

Secondary buttons

Secondary tab item 1 item section

Scroll buttons secondary

Tab 1 section

Filled buttons

Tab 1 section

Secondary using nav element

Secondary tab item 1 item section

Using nav element

Tab 1 section

Separate content

Tab 1 section

Props

Tabs properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodecontent rendered inside the Tabs Component.
classNamestring''additional classes added to the Tabs
activeKeynumber | string0the index of the active tab
onSelect(event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void() => undefined as anyhandle tab selection
idstringuniquely identifies the Tabs
isFilledbooleanfalseenables the filled tab list layout
isSecondarybooleanfalseenables Secondary Tab styling
leftScrollAriaLabelstring'Scroll left'aria-label for the left Scroll Button
rightScrollAriaLabelstring'Scroll right'aria-label for the right Scroll Button
variant'div' | 'nav'TabsVariant.divdetermines what tag is used around the Tabs. Use "nav" to define the Tabs inside a navigation region
aria-labelstringprovides an accessible label for the Tabs. Labels should be unique for each set of Tabs that are present on a page. When variant is set to nav, this prop should be defined to differentiate the Tabs from other navigation regions on the page.
mountOnEnterbooleanfalsewaits until the first "enter" transition to mount tab children (add them to the DOM)
unmountOnExitbooleanfalseunmounts tab children (removes them from the DOM) when they are no longer visible

CSS Variables

--pf-c-tabs__button--Backgroundc_tabs__button_Background
transparent
--pf-c-tabs__button--Colorc_tabs__button_Color
#151515
--pf-c-tabs__button--FontWeightc_tabs__button_FontWeight
400
--pf-c-tabs__button--OutlineOffsetc_tabs__button_OutlineOffset
calc(-1*0.25rem)
--pf-c-tabs__button--PaddingBottomc_tabs__button_PaddingBottom
0.5rem
--pf-c-tabs__button--PaddingLeftc_tabs__button_PaddingLeft
0.5rem
--pf-c-tabs__button--PaddingRightc_tabs__button_PaddingRight
0.5rem
--pf-c-tabs__button--PaddingTopc_tabs__button_PaddingTop
0.5rem
--pf-c-tabs__item--BackgroundColorc_tabs__item_BackgroundColor
#fff
--pf-c-tabs__item--BorderColorc_tabs__item_BorderColor
#d2d2d2
--pf-c-tabs__item--BorderWidthc_tabs__item_BorderWidth
1px
--pf-c-tabs__item--hover--Colorc_tabs__item_hover_Color
#737679
--pf-c-tabs__item--m-current--BorderTopWidthc_tabs__item_m_current_BorderTopWidth
2px
--pf-c-tabs__item--m-current--Colorc_tabs__item_m_current_Color
#06c
--pf-c-tabs__item--m-current--ZIndexc_tabs__item_m_current_ZIndex
200
--pf-c-tabs__scroll-button--m-secondary--hover--Colorc_tabs__scroll_button_m_secondary_hover_Color
#06c
--pf-c-tabs__scroll-button--m-secondary--nth-of-type-1--BoxShadowc_tabs__scroll_button_m_secondary_nth_of_type_1_BoxShadow
0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-c-tabs__scroll-button--m-secondary--nth-of-type-2--BoxShadowc_tabs__scroll_button_m_secondary_nth_of_type_2_BoxShadow
-0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-c-tabs__scroll-button--m-secondary-right--m-start-current--Colorc_tabs__scroll_button_m_secondary_right_m_start_current_Color
#06c
--pf-c-tabs__scroll-button--Widthc_tabs__scroll_button_Width
2rem
--pf-c-tabs__scroll-button--ZIndexc_tabs__scroll_button_ZIndex
100