Most tab variations are available as open (default) or box style tabs. Select the 'isBox' checkbox to preview an example with box styled tabs. The Tabs items background can be also toggled with 'Tab light variation' checkbox. Similarly the 'Tab content light variation' checkbox affects the TabContent background.
Examples
Default
When passing in a Tooltip component to the Tab component, the Tooltip can also be passed in directly to the tooltip prop.
With tooltip react ref
When using a React ref to link a Tooltip to a Tab component, an id must be manually set on the Tooltip component, and the Tab component must have a matching aria-describedby attribute so that screen readers are able to announce the Tooltip contents.
Default overflow
Tabs with sub tabs
Props
Tabs
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the tabs component. Must be React.ReactElement<TabProps>[] | |
| activeKey | number | string | 0 | The index of the active tab |
| aria-label | string | Provides an accessible label for the tabs. Labels should be unique for each set of tabs that are present on a page. When component is set to nav, this prop should be defined to differentiate the tabs from other navigation regions on the page. | |
| className | string | Additional classes added to the tabs | |
| component | 'div' | 'nav' | TabsComponent.div | Determines what tag is used around the tabs. Use "nav" to define the tabs inside a navigation region |
| defaultActiveKey | number | string | The index of the default active tab. Set this for uncontrolled Tabs | |
| defaultIsExpanded | boolean | Flag indicating the default expanded state for uncontrolled expand/collapse of | |
| expandable | { default?: 'expandable' | 'nonExpandable'; sm?: 'expandable' | 'nonExpandable'; md?: 'expandable' | 'nonExpandable'; lg?: 'expandable' | 'nonExpandable'; xl?: 'expandable' | 'nonExpandable'; '2xl'?: 'expandable' | 'nonExpandable'; } | Enable expandable vertical tabs at various breakpoints. (isVertical should be set to true for this to work) | |
| hasBorderBottom | boolean | true | Enables no border bottom tab styling |
| id | string | Uniquely identifies the tabs | |
| inset | { default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; } | Insets at various breakpoints. | |
| isBox | boolean | false | Enables box styling to the tab component |
| isExpanded | boolean | Flag to indicate if the vertical tabs are expanded | |
| isFilled | boolean | false | Enables the filled tab list layout |
| isSecondary | boolean | false | Enables secondary tab styling |
| isVertical | boolean | false | Enables vertical tab styling |
| leftScrollAriaLabel | string | 'Scroll left' | Aria-label for the left scroll button |
| mountOnEnter | boolean | false | Waits until the first "enter" transition to mount tab children (add them to the DOM) |
| onSelect | (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void | () => undefined as any | Callback to handle tab selection |
| onToggle | (isExpanded: boolean) => void | (isExpanded): void => undefined | Callback function to toggle the expandable tabs. |
| ouiaSafe | No type info | true | |
| rightScrollAriaLabel | string | 'Scroll right' | Aria-label for the right scroll button |
| toggleAriaLabel | string | Aria-label for the expandable toggle | |
| toggleText | string | Text that appears in the expandable toggle | |
| unmountOnExit | boolean | false | Unmounts tab children (removes them from the DOM) when they are no longer visible |
| usePageInsets | boolean | Flag indicates that the tabs should use page insets. | |
| variant | 'default' | 'light300' | 'default' | Tabs background color variant |
Tab
| Name | Type | Default | Description |
|---|---|---|---|
| eventKeyrequired | number | string | uniquely identifies the tab | |
| titlerequired | React.ReactNode | Content rendered in the tab title. Should be <TabTitleText> and/or <TabTitleIcon> for proper styling. | |
| children | React.ReactNode | content rendered inside the Tab content area. | |
| className | string | additional classes added to the Tab | |
| href | string | URL associated with the Tab. A Tab with an href will render as an <a> instead of a <button>. A Tab inside a <Tabs component="nav"> should have an href. | |
| innerRef | React.Ref<any> | Forwarded ref | |
| inoperableEvents | string[] | Events to prevent when the button is in an aria-disabled state | |
| isAriaDisabled | boolean | Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute | |
| isDisabled | boolean | Adds disabled styling and disables the button using the disabled html attribute | |
| isHidden | boolean | whether to render the tab or not | |
| tabContentId | string | number | child id for case in which a TabContent section is defined outside of a Tabs component | |
| tabContentRef | React.RefObject<any> | child reference for case in which a TabContent section is defined outside of a Tabs component | |
| tooltip | React.ReactElement<any> | Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. |
TabContent
| Name | Type | Default | Description |
|---|---|---|---|
| idrequired | string | id passed from parent to identify the content section | |
| activeKey | number | string | Identifies the active Tab | |
| aria-label | string | title of controlling Tab if used outside Tabs component | |
| child | React.ReactElement<any> | Child to show in the content area | |
| children | any | content rendered inside the tab content area if used outside Tabs component | |
| className | string | class of tab content area if used outside Tabs component | |
| eventKey | number | string | uniquely identifies the controlling Tab if used outside Tabs component | |
| innerRef | React.Ref<any> | Callback for the section ref |
TabTitleText
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Text to be rendered inside the tab button title. | |
| className | string | '' | additional classes added to the tab title text |
TabTitleIcon
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Icon to be rendered inside the tab button title. | |
| className | string | '' | additional classes added to the tab title icon |
CSS variables
| .pf-c-tabs | --pf-c-tabs--inset | 0 | |
| .pf-c-tabs | --pf-c-tabs--Width | auto | |
| .pf-c-tabs | --pf-c-tabs--before--BorderColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs--before--border-width--base | 1px | |
| .pf-c-tabs | --pf-c-tabs--before--BorderTopWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs--before--BorderRightWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs--before--BorderBottomWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs--before--BorderLeftWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs--m-vertical--inset | 1.5rem | |
| .pf-c-tabs | --pf-c-tabs--m-page-insets--inset | 1rem | |
| .pf-c-tabs | --pf-c-tabs--m-page-insets--xl--inset | 1.5rem | |
| .pf-c-tabs | --pf-c-tabs--m-vertical--Width | 100% | |
| .pf-c-tabs | --pf-c-tabs--m-vertical--MaxWidth | 15.625rem | |
| .pf-c-tabs | --pf-c-tabs--m-vertical--m-box--inset | 2rem | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--before--BorderColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--before--BorderTopWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--before--BorderRightWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--before--BorderBottomWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--before--BorderLeftWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor | transparent | |
| .pf-c-tabs | --pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor | #f0f0f0 | |
| .pf-c-tabs | --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor | #f5f5f5 | |
| .pf-c-tabs | --pf-c-tabs__list--Display | flex | |
| .pf-c-tabs | --pf-c-tabs__list--Visibility | visible | |
| .pf-c-tabs | --pf-c-tabs__item--m-action--before--ZIndex | 100 | |
| .pf-c-tabs | --pf-c-tabs__item--m-action__link--PaddingRight | 0.5rem | |
| .pf-c-tabs | --pf-c-tabs__link--Color | #6a6e73 | |
| .pf-c-tabs | --pf-c-tabs__link--FontSize | 1rem | |
| .pf-c-tabs | --pf-c-tabs__link--BackgroundColor | transparent | |
| .pf-c-tabs | --pf-c-tabs__link--OutlineOffset | calc(-1 * 0.375rem) | |
| .pf-c-tabs | --pf-c-tabs__link--PaddingTop | 0.5rem | |
| .pf-c-tabs | --pf-c-tabs__link--PaddingRight | 1rem | |
| .pf-c-tabs | --pf-c-tabs__link--PaddingBottom | 0.5rem | |
| .pf-c-tabs | --pf-c-tabs__link--PaddingLeft | 1rem | |
| .pf-c-tabs | --pf-c-tabs__link--disabled--BackgroundColor | #f5f5f5 | |
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--Color | #151515 | |
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--BackgroundColor | #fff | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__link--PaddingTop | 1rem | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__link--PaddingBottom | 1rem | |
| .pf-c-tabs | --pf-c-tabs--m-box__link--BackgroundColor | #f0f0f0 | |
| .pf-c-tabs | --pf-c-tabs--m-box__link--disabled--BackgroundColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor | #b8bbbe | |
| .pf-c-tabs | --pf-c-tabs--m-secondary__link--FontSize | 0.875rem | |
| .pf-c-tabs | --pf-c-tabs__link--before--border-color--base | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs__link--before--border-width--base | 1px | |
| .pf-c-tabs | --pf-c-tabs__link--before--BorderTopColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs__link--before--BorderRightColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs__link--before--BorderBottomColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs__link--before--BorderLeftColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs__link--before--BorderTopWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--before--BorderRightWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--before--BorderBottomWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--before--BorderLeftWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--before--Left | calc(1px * -1) | |
| .pf-c-tabs | --pf-c-tabs__link--disabled--before--BorderRightWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--disabled--before--BorderBottomWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs__link--disabled--before--BorderLeftWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--after--Top | auto | |
| .pf-c-tabs | --pf-c-tabs__link--after--Right | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--after--Bottom | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--after--BorderColor | #b8bbbe | |
| .pf-c-tabs | --pf-c-tabs__link--after--BorderWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--after--BorderTopWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--after--BorderRightWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--after--BorderLeftWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--hover--after--BorderWidth | 3px | |
| .pf-c-tabs | --pf-c-tabs__link--focus--after--BorderWidth | 3px | |
| .pf-c-tabs | --pf-c-tabs__link--active--after--BorderWidth | 3px | |
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--after--BorderColor | #06c | |
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--after--BorderWidth | 3px | |
| .pf-c-tabs | --pf-c-tabs__link--child--MarginRight | 1rem | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--Color | #151515 | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--hover--Color | #06c | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--disabled--Color | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--BackgroundColor | #fff | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--Width | 3rem | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--xl--Width | 4rem | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--OutlineOffset | calc(-1 * 0.25rem) | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--TransitionDuration--margin | .125s | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--TransitionDuration--transform | .125s | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--TransitionDuration--opacity | .125s | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--border-width--base | 1px | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderRightWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderBottomWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderLeftWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs__list--ScrollSnapTypeAxis | x | |
| .pf-c-tabs | --pf-c-tabs__list--ScrollSnapTypeStrictness | proximity | |
| .pf-c-tabs | --pf-c-tabs__list--ScrollSnapType | x proximity | |
| .pf-c-tabs | --pf-c-tabs__item--ScrollSnapAlign | end | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--ScrollSnapTypeAxis | y | |
| .pf-c-tabs | --pf-c-tabs__toggle--Display | flex | |
| .pf-c-tabs | --pf-c-tabs__toggle--Visibility | hidden | |
| .pf-c-tabs | --pf-c-tabs__toggle--MarginBottom | 0 | |
| .pf-c-tabs | --pf-c-tabs--m-expanded__toggle--MarginBottom | 1rem | |
| .pf-c-tabs | --pf-c-tabs__toggle-icon--Color | currentColor | |
| .pf-c-tabs | --pf-c-tabs__toggle-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | |
| .pf-c-tabs | --pf-c-tabs__toggle-icon--Rotate | 0 | |
| .pf-c-tabs | --pf-c-tabs__toggle-text--MarginLeft | 0 | |
| .pf-c-tabs | --pf-c-tabs__toggle-button__toggle-text--MarginLeft | 1rem | |
| .pf-c-tabs | --pf-c-tabs__toggle-button__toggle-text--Color | #151515 | |
| .pf-c-tabs | --pf-c-tabs__toggle-button--MarginTop | calc(-1 * 0.375rem) | |
| .pf-c-tabs | --pf-c-tabs__toggle-button--MarginBottom | calc(-1 * 0.375rem) | |
| .pf-c-tabs | --pf-c-tabs__toggle-button--MarginLeft | calc(-1 * 1rem) | |
| .pf-c-tabs | --pf-c-tabs--m-expanded__toggle-icon--Color | #151515 | |
| .pf-c-tabs | --pf-c-tabs--m-expanded__toggle-icon--Rotate | 90deg | |
| .pf-c-tabs | --pf-c-tabs__item-close--c-button--FontSize | 0.75rem | |
| .pf-c-tabs | --pf-c-tabs--m-secondary__item-close--c-button--FontSize | 0.625rem | |
| .pf-c-tabs | --pf-c-tabs__item-close--c-button--PaddingTop | 0.5rem | |
| .pf-c-tabs | --pf-c-tabs__item-close--c-button--PaddingBottom | 0.5rem | |
| .pf-c-tabs | --pf-c-tabs__item-close--c-button--PaddingLeft | 0.5rem | |
| .pf-c-tabs | --pf-c-tabs__item-close--c-button--OutlineOffset | -0.1875rem | |
| .pf-c-tabs | --pf-c-tabs__item-close-icon--MarginTop | 0.125rem | |
| .pf-c-tabs | --pf-c-tabs__add--before--BorderColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs__add--before--BorderLeftWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs__add--c-button--FontSize | 0.875rem | |
| .pf-c-tabs | --pf-c-tabs--m-secondary__add--c-button--FontSize | 0.75rem | |
| .pf-c-tabs | --pf-c-tabs__add--c-button--PaddingTop | 0.5rem | |
| .pf-c-tabs | --pf-c-tabs__add--c-button--PaddingBottom | 0.5rem | |
| .pf-c-tabs.pf-m-fill .pf-c-tabs__item:first-child | --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth | 0 | |
| .pf-c-tabs.pf-m-fill .pf-c-tabs__item:last-child | --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth | 0 | |
| .pf-c-tabs.pf-m-secondary | --pf-c-tabs--before--BorderBottomWidth | 0 | |
| .pf-c-tabs.pf-m-secondary | --pf-c-tabs__link--disabled--before--BorderBottomWidth | 0 | |
| .pf-c-tabs.pf-m-secondary | --pf-c-tabs__link--FontSize | 0.875rem | |
| .pf-c-tabs.pf-m-secondary | --pf-c-tabs__item-close--c-button--FontSize | 0.625rem | |
| .pf-c-tabs.pf-m-secondary | --pf-c-tabs__add--c-button--FontSize | 0.75rem | |
| .pf-c-tabs.pf-m-border-bottom | --pf-c-tabs--before--BorderBottomWidth | 1px | |
| .pf-c-tabs.pf-m-border-bottom | --pf-c-tabs__link--disabled--before--BorderBottomWidth | 1px | |
| .pf-c-tabs.pf-m-box .pf-c-tabs__link | --pf-c-tabs__link--after--BorderBottomWidth | 0 | |
| .pf-c-tabs.pf-m-box .pf-c-tabs__link | --pf-c-tabs__link--after--BorderTopWidth | 0 | |
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--BackgroundColor | #f0f0f0 | |
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--disabled--BackgroundColor | #d2d2d2 | |
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--before--BorderBottomWidth | 1px | |
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--before--BorderRightWidth | 1px | |
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--disabled--before--BorderRightWidth | 1px | |
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--after--Top | 0 | |
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--after--Bottom | auto | |
| .pf-c-tabs.pf-m-box .pf-c-tabs__item:last-child | --pf-c-tabs__link--before--BorderRightWidth | 0 | |
| .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--BackgroundColor | #fff | |
| .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--before--BorderBottomColor | #fff | |
| .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current + .pf-c-tabs__item | --pf-c-tabs__link--before--Left | 0 | |
| .pf-c-tabs.pf-m-box.pf-m-color-scheme--light-300 | --pf-c-tabs__link--BackgroundColor | transparent | |
| .pf-c-tabs.pf-m-box.pf-m-color-scheme--light-300 | --pf-c-tabs__item--m-current__link--BackgroundColor | #f0f0f0 | |
| .pf-c-tabs.pf-m-box.pf-m-color-scheme--light-300 | --pf-c-tabs__link--disabled--BackgroundColor | #f5f5f5 | |
| .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button | --pf-c-button--m-plain--disabled--Color | #b8bbbe | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs--Width | 100% | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs--inset | 1.5rem | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs--before--BorderBottomWidth | 0 | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--PaddingTop | 1rem | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--PaddingBottom | 1rem | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--before--Left | 0 | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--disabled--before--BorderBottomWidth | 0 | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--disabled--before--BorderLeftWidth | 1px | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--after--Top | 0 | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--after--Bottom | 0 | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--after--Right | auto | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__list--ScrollSnapTypeAxis | y | |
| .pf-c-tabs.pf-m-vertical .pf-c-tabs__link | --pf-c-tabs__link--after--BorderTopWidth | 0 | |
| .pf-c-tabs.pf-m-vertical .pf-c-tabs__link | --pf-c-tabs__link--after--BorderLeftWidth | 0 | |
| .pf-c-tabs.pf-m-vertical.pf-m-expandable | --pf-c-tabs__list--Display | none | |
| .pf-c-tabs.pf-m-vertical.pf-m-expandable | --pf-c-tabs__list--Visibility | hidden | |
| .pf-c-tabs.pf-m-vertical.pf-m-expandable | --pf-c-tabs__toggle--Display | flex | |
| .pf-c-tabs.pf-m-vertical.pf-m-expandable | --pf-c-tabs__toggle--Visibility | visible | |
| .pf-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-c-tabs__list--Display | flex | |
| .pf-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-c-tabs__list--Visibility | visible | |
| .pf-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-c-tabs__toggle--Display | none | |
| .pf-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-c-tabs__toggle--Visibility | hidden | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__list--Display | flex | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__list--Visibility | visible | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__toggle--MarginBottom | 1rem | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__toggle-icon--Color | #151515 | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__toggle-icon--Rotate | 90deg | |
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs--inset | 2rem | |
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs--m-vertical__list--before--BorderLeftWidth | 0 | |
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs--m-vertical__list--before--BorderRightWidth | 1px | |
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs__link--disabled--before--BorderRightWidth | 1px | |
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs__link--disabled--before--BorderBottomWidth | 1px | |
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs__link--disabled--before--BorderLeftWidth | 0 | |
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:last-child | --pf-c-tabs__link--before--BorderBottomWidth | 0 | |
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:last-child | --pf-c-tabs__link--before--BorderRightWidth | 1px | |
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--before--BorderRightColor | #fff | |
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--before--BorderBottomColor | #d2d2d2 | |
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--before--BorderBottomWidth | 1px | |
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current:first-child | --pf-c-tabs__link--before--BorderTopWidth | 1px | |
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:first-child.pf-m-current | --pf-c-tabs__link--before--BorderTopWidth | 1px | |
| .pf-c-tabs.pf-m-page-insets | --pf-c-tabs--inset | 1rem | |
| .pf-c-tabs__toggle-button | --pf-c-tabs__toggle-text--MarginLeft | 1rem | |
| .pf-c-tabs__toggle-button | --pf-c-tabs__toggle-text--Color | #151515 | |
| .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--Color | #151515 | |
| .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--after--BorderColor | #06c | |
| .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--after--BorderWidth | 3px | |
| .pf-c-tabs__item.pf-m-action | --pf-c-tabs__link--PaddingRight | 0.5rem | |
| .pf-c-tabs__item.pf-m-action | --pf-c-tabs__link--after--BorderBottomWidth | 0 | |
| .pf-c-tabs__item.pf-m-action:hover | --pf-c-tabs__link--after--BorderWidth | 3px | |
| .pf-c-tabs__item.pf-m-action:focus-within | --pf-c-tabs__link--after--BorderWidth | 3px | |
| .pf-c-tabs__item.pf-m-action:active | --pf-c-tabs__link--after--BorderWidth | 3px | |
| .pf-c-tabs__item.pf-m-action.pf-m-disabled | --pf-c-tabs__link--BackgroundColor | #f5f5f5 | |
| .pf-c-tabs__item.pf-m-action.pf-m-disabled | --pf-c-tabs__link--before--BorderRightWidth | 0 | |
| .pf-c-tabs__item.pf-m-action.pf-m-disabled | --pf-c-tabs__link--before--BorderBottomWidth | 1px | |
| .pf-c-tabs__item.pf-m-action.pf-m-disabled | --pf-c-tabs__link--before--BorderLeftWidth | 0 | |
| .pf-c-tabs__item.pf-m-action.pf-m-disabled | --pf-c-tabs__link--after--BorderWidth | 0 | |
| .pf-c-tabs__link .pf-c-tabs__item-icon:last-child | --pf-c-tabs__link--child--MarginRight | 0 | |
| .pf-c-tabs__item-close .pf-c-button | --pf-c-button--FontSize | 0.75rem | |
| .pf-c-tabs__item-close .pf-c-button | --pf-c-button--PaddingTop | 0.5rem | |
| .pf-c-tabs__item-close .pf-c-button | --pf-c-button--PaddingBottom | 0.5rem | |
| .pf-c-tabs__item-close .pf-c-button | --pf-c-button--PaddingLeft | 0.5rem | |
| .pf-c-tabs__scroll-button:hover | --pf-c-tabs__scroll-button--Color | #06c | |
| .pf-c-tabs__scroll-button:nth-of-type(1) | --pf-c-tabs__scroll-button--before--BorderRightWidth | 1px | |
| .pf-c-tabs__scroll-button:nth-of-type(2) | --pf-c-tabs__scroll-button--before--BorderLeftWidth | 1px | |
| .pf-c-tabs__scroll-button:disabled | --pf-c-tabs__scroll-button--Color | #d2d2d2 | |
| .pf-c-tabs__add .pf-c-button | --pf-c-button--FontSize | 0.875rem | |
| .pf-c-tabs__add .pf-c-button | --pf-c-button--PaddingTop | 0.5rem | |
| .pf-c-tabs__add .pf-c-button | --pf-c-button--PaddingBottom | 0.5rem | |
| .pf-c-tabs.pf-m-inset-none | --pf-c-tabs--inset | 0 | |
| .pf-c-tabs.pf-m-inset-none | --pf-c-tabs--m-vertical--inset | 0 | |
| .pf-c-tabs.pf-m-inset-none | --pf-c-tabs--m-vertical--m-box--inset | 0 | |
| .pf-c-tabs.pf-m-inset-sm | --pf-c-tabs--inset | 0.5rem | |
| .pf-c-tabs.pf-m-inset-sm | --pf-c-tabs--m-vertical--inset | 0.5rem | |
| .pf-c-tabs.pf-m-inset-sm | --pf-c-tabs--m-vertical--m-box--inset | 0.5rem | |
| .pf-c-tabs.pf-m-inset-md | --pf-c-tabs--inset | 1rem | |
| .pf-c-tabs.pf-m-inset-md | --pf-c-tabs--m-vertical--inset | 1rem | |
| .pf-c-tabs.pf-m-inset-md | --pf-c-tabs--m-vertical--m-box--inset | 1rem | |
| .pf-c-tabs.pf-m-inset-lg | --pf-c-tabs--inset | 1.5rem | |
| .pf-c-tabs.pf-m-inset-lg | --pf-c-tabs--m-vertical--inset | 1.5rem | |
| .pf-c-tabs.pf-m-inset-lg | --pf-c-tabs--m-vertical--m-box--inset | 1.5rem | |
| .pf-c-tabs.pf-m-inset-xl | --pf-c-tabs--inset | 2rem | |
| .pf-c-tabs.pf-m-inset-xl | --pf-c-tabs--m-vertical--inset | 2rem | |
| .pf-c-tabs.pf-m-inset-xl | --pf-c-tabs--m-vertical--m-box--inset | 2rem | |
| .pf-c-tabs.pf-m-inset-2xl | --pf-c-tabs--inset | 3rem | |
| .pf-c-tabs.pf-m-inset-2xl | --pf-c-tabs--m-vertical--inset | 3rem | |
| .pf-c-tabs.pf-m-inset-2xl | --pf-c-tabs--m-vertical--m-box--inset | 3rem | |
View source on GitHub
