Skip to content
Patternfly Logo

Tabs

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.

Users

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.

Users

Uncontrolled

Users

Box light variation

Users

Default overflow

Users

Vertical

Users

Vertical expandable

Users

Vertical expandable uncontrolled

Users

Inset

Users

Page Insets

Users

Icons and text

Users

Tabs with sub tabs

Filled

Users

Filled with icons

Users

Using the nav element

Users

Separate content

Tab 1 section

Tab content with body and padding

Tab 1 section

Children mounting on click

Tab 1 section

Unmounting invisible children

Tab 1 section

Toggled separate content


Tab 1 section

Props

Tabs

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the tabs component. Must be React.ReactElement<TabProps>[]
activeKeynumber | string0The index of the active tab
aria-labelstringProvides 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.
classNamestringAdditional classes added to the tabs
component'div' | 'nav'TabsComponent.divDetermines what tag is used around the tabs. Use "nav" to define the tabs inside a navigation region
defaultActiveKeynumber | stringThe index of the default active tab. Set this for uncontrolled Tabs
defaultIsExpandedbooleanFlag 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)
hasBorderBottombooleantrueEnables no border bottom tab styling
idstringUniquely 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.
isBoxbooleanfalseEnables box styling to the tab component
isExpandedbooleanFlag to indicate if the vertical tabs are expanded
isFilledbooleanfalseEnables the filled tab list layout
isSecondarybooleanfalseEnables secondary tab styling
isVerticalbooleanfalseEnables vertical tab styling
leftScrollAriaLabelstring'Scroll left'Aria-label for the left scroll button
mountOnEnterbooleanfalseWaits 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 anyCallback to handle tab selection
onToggle(isExpanded: boolean) => void(isExpanded): void => undefinedCallback function to toggle the expandable tabs.
ouiaSafeNo type infotrue
rightScrollAriaLabelstring'Scroll right'Aria-label for the right scroll button
toggleAriaLabelstringAria-label for the expandable toggle
toggleTextstringText that appears in the expandable toggle
unmountOnExitbooleanfalseUnmounts tab children (removes them from the DOM) when they are no longer visible
usePageInsetsbooleanFlag indicates that the tabs should use page insets.
variant'default' | 'light300''default'Tabs background color variant

Tab

*required
NameTypeDefaultDescription
eventKeyrequirednumber | stringuniquely identifies the tab
titlerequiredReact.ReactNodeContent rendered in the tab title. Should be <TabTitleText> and/or <TabTitleIcon> for proper styling.
childrenReact.ReactNodecontent rendered inside the Tab content area.
classNamestringadditional classes added to the Tab
hrefstringURL 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.
innerRefReact.Ref<any>Forwarded ref
inoperableEventsstring[]Events to prevent when the button is in an aria-disabled state
isAriaDisabledbooleanAdds disabled styling and communicates that the button is disabled using the aria-disabled html attribute
isDisabledbooleanAdds disabled styling and disables the button using the disabled html attribute
isHiddenbooleanwhether to render the tab or not
tabContentIdstring | numberchild id for case in which a TabContent section is defined outside of a Tabs component
tabContentRefReact.RefObject<any>child reference for case in which a TabContent section is defined outside of a Tabs component
tooltipReact.ReactElement<any>Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering.

TabContent

*required
NameTypeDefaultDescription
idrequiredstringid passed from parent to identify the content section
activeKeynumber | stringIdentifies the active Tab
aria-labelstringtitle of controlling Tab if used outside Tabs component
childReact.ReactElement<any>Child to show in the content area
childrenanycontent rendered inside the tab content area if used outside Tabs component
classNamestringclass of tab content area if used outside Tabs component
eventKeynumber | stringuniquely identifies the controlling Tab if used outside Tabs component
innerRefReact.Ref<any>Callback for the section ref

TabTitleText

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeText to be rendered inside the tab button title.
classNamestring''additional classes added to the tab title text

TabTitleIcon

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeIcon to be rendered inside the tab button title.
classNamestring''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