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

Simple tabs

Use primary sections

Tab 1 section
Copied to clipboard

Scroll buttons tabs

Tab 1 section
Copied to clipboard

Secondary buttons tabs

Secondary tab item 1 item section
Copied to clipboard

Filled buttons tabs

Tab 1 section
Copied to clipboard

Secondary tabs using the nav element

Secondary tab item 1 item section
Copied to clipboard

Tabs using the nav element

Tab 1 section
Copied to clipboard

Separate tab content

Tab 1 section
Copied to clipboard

Props

Tab Props

The Tab component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullcontent rendered inside the Tab content area.
classNamestring''additional classes added to the Tab
hrefstringnullURL associated with the Tab. A Tab with an href will render as an <a> instead of a <button>. A Tab inside a <Tabs variant="nav"> should have an href.
titlestringTab title
eventKeynumberuniquely identifies the tab
tabContentIdunionnullchild id for case in which a TabContent section is defined outside of a Tabs component
tabContentRefnodenullchild reference for case in which a TabContent section is defined outside of a Tabs component

Tabs Props

The Tabs component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodecontent rendered inside the Tabs Component.
classNamestring''additional classes added to the Tabs
activeKeynumber0the index of the active tab
onSelectfunc() => undefinedhandle tab selection
idstringnulluniquely identifies the Tabs
isFilledboolfalseenables the filled tab list layout
isSecondaryboolfalseenables Secondary Tab styling
leftScrollAriaLabelstring'Scroll left'aria-label for the left Scroll Button
rightScrollAriaLabelstring'Scroll Right'aria-label for the right Scroll Button
variantenum'div'determines what tag is used around the Tabs. Use "nav" to define the Tabs inside a navigation region
aria-labelstringnullprovides 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.

CSS Variables

--pf-c-tabs__button--Backgroundc_tabs__button_Backgroundtransparent
--pf-c-tabs__button--PaddingBottomc_tabs__button_PaddingBottom0.5rem
--pf-c-tabs__button--PaddingLeftc_tabs__button_PaddingLeft0.5rem
--pf-c-tabs__button--PaddingRightc_tabs__button_PaddingRight0.5rem
--pf-c-tabs__button--PaddingTopc_tabs__button_PaddingTop0.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_BorderWidth1px
--pf-c-tabs__item--hover--Colorc_tabs__item_hover_Color#72767b
--pf-c-tabs__item--m-current--BorderTopWidthc_tabs__item_m_current_BorderTopWidth2px
--pf-c-tabs__item--m-current--Colorc_tabs__item_m_current_Color#06c
--pf-c-tabs__item--m-current--ZIndexc_tabs__item_m_current_ZIndex200
--pf-c-tabs__scroll-button--Widthc_tabs__scroll_button_Width2rem
--pf-c-tabs__scroll-button--ZIndexc_tabs__scroll_button_ZIndex300
--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_BoxShadow0.75rem 0 0.625rem -0.25rem rgba(3,3,3,.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,.07)
--pf-c-tabs__scroll-button--m-secondary-right--m-start-current--Colorc_tabs__scroll_button_m_secondary_right_m_start_current_Color#06c