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

Copied to clipboard

Scroll buttons primary tabs

Copied to clipboard

Secondary buttons tabs

Copied to clipboard

Scroll buttons secondary tabs

Copied to clipboard

Filled buttons tabs

Copied to clipboard

Secondary tabs using the nav element

Copied to clipboard

Tabs using the nav element

Copied to clipboard

Separate tab content

Copied to clipboard

Props

Tabs Props

The Tabs component accepts the following props.

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.

CSS Variables

--pf-c-tabs__button--Backgroundc_tabs__button_Backgroundtransparent
--pf-c-tabs__button--Colorc_tabs__button_Color#151515
--pf-c-tabs__button--FontWeightc_tabs__button_FontWeight400
--pf-c-tabs__button--OutlineOffsetc_tabs__button_OutlineOffsetcalc(-1 * 0.25rem)
--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#737679
--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_ZIndex100
--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