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 via the reference prop, you should avoid manually passing in a value of "off" to the aria-live prop. Doing so may lead to the tooltip becoming less accessible to assistive technologies.
The tooltip should also have the id prop passed in. The value given to this prop should then be passed into the tab's aria-describedby prop. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.
Default overflow
Horizontal overflow Beta
Tabs with sub tabs
Tab content with body and padding
Tab 1 section with body and padding
Tab 2 section with body and padding
Tab 3 section with body and padding
Dynamic
To enable closeable tabs, pass the onClose property to Tabs, and to enable the add button, pass the onAdd property to Tabs. Aria labels may be controlled manually by passing closeButtonAriaLabel to Tab and addButtonAriaLabel to 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 |
| addButtonAriaLabel | string | Aria-label for the add button | |
| 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 border bottom tab styling on tabs. Defaults to true. To remove the bottom border, set this prop to false. |
| hasSecondaryBorderBottom | boolean | Enables border bottom styling for secondary tabs | |
| 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 |
| isOverflowHorizontalBeta | boolean | HorizontalOverflowObject | Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. | |
| 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) |
| onAdd | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | Callback for the add button. Passing this property inserts the add button | |
| onClose | (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void | Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. | |
| 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. |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | true | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
| 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. | |
| actionsBeta | React.ReactNode | Actions rendered beside the tab content | |
| children | React.ReactNode | content rendered inside the Tab content area. | |
| className | string | additional classes added to the Tab | |
| closeButtonAriaLabelBeta | string | Aria-label for the close button added by passing the onClose property to Tabs. | |
| 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 | |
| isCloseDisabledBeta | boolean | Flag indicating the close button should be disabled | |
| isDisabled | boolean | Adds disabled styling and disables the button using the disabled html attribute | |
| isHidden | boolean | whether to render the tab or not | |
| ouiaId | number | string | Value to set the data-ouia-component-id for the tab button. | |
| 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. |
TabAction
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Accessible label for the tab action | |
| children | React.ReactNode | Content rendered in the tab action | |
| className | string | Additional classes added to the tab action span | |
| isDisabled | boolean | Flag indicating if the tab action is disabled | |
| onClick | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | Click callback for tab action button |
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 | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
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__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--Color | #6a6e73 | ||
| .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-action--c-button--disabled--BackgroundColor | #b8bbbe | ||
| .pf-c-tabs | --pf-c-tabs--m-secondary__link--FontSize | 0.875rem | ||
| .pf-c-tabs | --pf-c-tabs__item--m-action__link--PaddingRight | 0.25rem | ||
| .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-action--c-button--FontSize | 0.75rem | ||
| .pf-c-tabs | --pf-c-tabs--m-secondary__item-action--c-button--FontSize | 0.625rem | ||
| .pf-c-tabs | --pf-c-tabs__item-action--c-button--PaddingTop | 0.5rem | ||
| .pf-c-tabs | --pf-c-tabs__item-action--c-button--PaddingRight | 0.5rem | ||
| .pf-c-tabs | --pf-c-tabs__item-action--c-button--PaddingBottom | 0.5rem | ||
| .pf-c-tabs | --pf-c-tabs__item-action--c-button--PaddingLeft | 0.5rem | ||
| .pf-c-tabs | --pf-c-tabs__item-action--last-child--c-button--PaddingRight | 1rem | ||
| .pf-c-tabs | --pf-c-tabs__item-action--c-button--OutlineOffset | -0.1875rem | ||
| .pf-c-tabs | --pf-c-tabs__item-action-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-c-tabs__add--c-button--OutlineOffset | calc(-1 * 0.25rem) | ||
| .pf-c-tabs | --pf-c-tabs__link-toggle-icon--Color | #6a6e73 | ||
| .pf-c-tabs | --pf-c-tabs__link-toggle-icon--Transition | .2s ease-in 0s | ||
| .pf-c-tabs | --pf-c-tabs__link-toggle-icon--Rotate | 0 | ||
| .pf-c-tabs | --pf-c-tabs__link-toggle-icon--FontSize | 0.875rem | ||
| .pf-c-tabs | --pf-c-tabs__link--m-expanded__toggle-icon--Color | #151515 | ||
| .pf-c-tabs | --pf-c-tabs__link--m-expanded__toggle-icon--Rotate | 90deg | ||
| .pf-c-tabs | --pf-c-tabs__link--hover__toggle-icon--Color | #151515 | ||
| .pf-c-tabs | --pf-c-tabs__link--active__toggle-icon--Color | #151515 | ||
| .pf-c-tabs | --pf-c-tabs__link--focus__toggle-icon--Color | #151515 | ||
| .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-action--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-action .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.25rem | ||
| .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__link:hover | --pf-c-tabs__link-toggle-icon--Color | #151515 | ||
| .pf-c-tabs__link:focus | --pf-c-tabs__link-toggle-icon--Color | #151515 | ||
| .pf-c-tabs__link:active | --pf-c-tabs__link-toggle-icon--Color | #151515 | ||
| .pf-c-tabs__item.pf-m-action.pf-m-disabled | --pf-c-tabs__link--Color | #6a6e73 | ||
| .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__link.pf-m-expanded | --pf-c-tabs__link-toggle-icon--Color | #151515 | ||
| .pf-c-tabs__link.pf-m-expanded | --pf-c-tabs__link-toggle-icon--Rotate | 90deg | ||
| .pf-c-tabs__item-action .pf-c-button | --pf-c-button--FontSize | 0.75rem | ||
| .pf-c-tabs__item-action .pf-c-button | --pf-c-button--PaddingTop | 0.5rem | ||
| .pf-c-tabs__item-action .pf-c-button | --pf-c-button--PaddingRight | 0.5rem | ||
| .pf-c-tabs__item-action .pf-c-button | --pf-c-button--PaddingBottom | 0.5rem | ||
| .pf-c-tabs__item-action .pf-c-button | --pf-c-button--PaddingLeft | 0.5rem | ||
| .pf-c-tabs__item-action:last-child | --pf-c-tabs__item-action--c-button--PaddingRight | 1rem | ||
| .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
