Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Tabs

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-tabsrh-tab-panelrh-tabImportingUsagerh-tabsrh-tab-panelrh-tab

Importing

Add rh-tabs to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-tabs>
  <rh-tab id="users" slot="tab" active="">Users</rh-tab>
  <rh-tab-panel>Users</rh-tab-panel>
  <rh-tab slot="tab">Containers</rh-tab>
  <rh-tab-panel>Containers <a href="#">Focusable element</a></rh-tab-panel>
  <rh-tab slot="tab">Database</rh-tab>
  <rh-tab-panel>Database</rh-tab-panel>
  <rh-tab slot="tab">Servers</rh-tab>
  <rh-tab-panel>Servers</rh-tab-panel>
  <rh-tab slot="tab">Cloud</rh-tab>
  <rh-tab-panel>Cloud</rh-tab-panel>
</rh-tabs>

<script type="module">
  import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>

<style>
  a {
    color: var(--rh-color-interactive-primary-default);

    &:hover {
      color: var(--rh-color-interactive-primary-hover);
    }

    &:focus-within {
      color: var(--rh-color-interactive-primary-focus);
    }

    &:active {
      color: var(--rh-color-interactive-primary-active);
    }

    &:visited {
      color: var(--rh-color-interactive-primary-visited);

      &:hover {
        color: var(--rh-color-interactive-primary-visited-hover);
      }

      &:focus-within {
        color: var(--rh-color-interactive-primary-visited-focus);
      }

      &:active {
        color: var(--rh-color-interactive-primary-visited-active);
      }
    }
  }
</style>
Copy to Clipboard Wrap lines

rh-tabs

Tabs provide a way for users to organize and navigate between sections of content on the same page. Each tab must be paired with a corresponding rh-tab-panel. When using keyboard navigation, arrow keys move focus between tabs following the WAI-ARIA Tabs pattern. The component allows horizontal, vertical, and boxed layouts, and overflow scroll buttons appear when tabs exceed the available width.

Theming

Themable Color palette

This element uses Red Hat design system theming and can be used in themable contexts.

This element is a color palette container and supports all color palettes via the color-palette attribute.

Slots 2

Slot Name Summary Description
tab

Tab elements

Must contain one or more <rh-tab> elements. Each tab must have a corresponding <rh-tab-panel> in the default slot. Screen readers announce the tab role and selected state for each tab.
[default]

Panel elements

Must contain one or more <rh-tab-panel> elements. Each panel must correspond to a tab in the tab slot. Panels receive role="tabpanel" and are focusable via Tab key for keyboard accessibility.
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 8

Attribute DOM Property Description Type Default
label-scroll-left labelScrollLeft

Accessible label for the scroll-left overflow button. Authors should localize this string for non-English pages.

 
string
 
'Scroll left'
label-scroll-right labelScrollRight

Accessible label for the scroll-right overflow button. Authors should localize this string for non-English pages.

 
string
 
'Scroll right'
manual manual

When true, tabs use manual activation, requiring the user to press Enter or click to activate a focused tab. When false (default), tabs use automatic activation, where focus immediately selects the tab.

 
boolean
 
false
active-index activeIndex

Zero-based index of the currently active tab. Setting this property programmatically selects the tab at that index. Defaults to -1 (no tab selected).

 
unknown
 
unknown
color-palette colorPalette

Sets the color palette for child components, overriding any inherited context from parent elements.

 
'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'
 
unknown
centered centered

When true, centers the tab list within the container. Authors should avoid centering when there are many tabs, as it may cause layout issues with overflow.

 
boolean
 
false
box box

Sets the tab style to boxed (box) or boxed with inset padding (inset). When unset, tabs use the default open style.

 
'box' | 'inset'
 
unknown
vertical vertical

When true, displays the tab list vertically to the left of the panels. On small viewports (below 768px), vertical tabs revert to horizontal layout.

 
boolean
 
false

Methods 2

Method Name Description
firstUpdated()
select(option: RhTab | number)

Events 1

Event Name Description
expand

when a tab is selected. The event detail shape includes active (boolean) indicating prior state and tab (RhTab) referencing the expanded element. Cancelable with preventDefault().

CSS Shadow Parts 4

Part Name Summary Description
container

outer container
tabs-container

tabs container
tabs

Tab elements

Must contain one or more <rh-tab> elements. Each tab must have a corresponding <rh-tab-panel> in the default slot. Screen readers announce the tab role and selected state for each tab.
panels

Panel elements

Must contain one or more <rh-tab-panel> elements. Each panel must correspond to a tab in the tab slot. Panels receive role="tabpanel" and are focusable via Tab key for keyboard accessibility.

CSS Custom Properties 2

CSS Property Description Default
--rh-color-icon-status-disabled —
--rh-tabs-inset var(--_inset-inline-margin, auto)

Design Tokens 14

Token Description Copy
--rh-font-size-body-text-md

Font size using rh-font-size-body-text-md token

16px font size
--rh-color-accent-base

Overflow scroll button arrow accent color
--rh-color-text-secondary

Overflow scroll button default text color
--rh-color-gray-40

Subtle icon (hover state)
--rh-color-gray-60

Secondary text (light theme)
--rh-space-3xl

48px spacer
--rh-space-4xl

64px spacer
--rh-space-2xl

32px spacer
--rh-space-lg

Scroll button inline padding

16px spacer
--rh-color-surface

Tabs background, adapts to color-palette

Scroll button background, adapts to color-palette
--rh-border-width-sm

Tab list bottom border width

Vertical border using rh-border-width-sm token

1px border width; Example: Secondary CTA or Button
--rh-color-text-primary

Text color, adapts to color-palette

Overflow scroll button hover text color

Container text color from rh-color-text-primary
--rh-border-width-lg

3px border width: Example: Expanded Accordion panel
--rh-color-border-subtle

Tab list bottom border color, adapts to color-palette

rh-tab-panel

A content panel for use in an rh-tabs element. Each panel must be paired with a corresponding rh-tab. Authors should avoid empty panels. The ARIA tabpanel role and tabindex allow screen reader and keyboard navigation.

Theming

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slots 1

Slot Name Summary Description
[default]

Panel content

Content shown when the paired tab is active. Screen reader users navigate here via the ARIA tabpanel role. Authors should ensure keyboard accessibility.
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 0

None

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 2

Token Description Copy
--rh-space-2xl

32px spacer
--rh-color-interactive-primary-default

Focus ring, design token rh-color-interactive-primary

rh-tab

A tab button for use in an rh-tabs element. Each rh-tab must be paired with an rh-tab-panel. The ARIA tab role and aria-selected state allow screen reader users to identify the active tab. Authors should keep labels short and should avoid interactive content inside the tab.

Theming

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slots 2

Slot Name Summary Description
icon

Icon

Can contain an <svg> or <rh-icon> element displayed before the tab label text.
[default]

Tab label

Tab label text. Authors should keep labels short and descriptive.
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 4

Attribute DOM Property Description Type Default
active active

When true, this tab is the currently selected tab. Only one tab in a set should be active at a time. Screen readers announce the active state via aria-selected.

 
boolean
 
false
disabled disabled

When true, the tab cannot be activated by click, Enter, or focus. The tab receives aria-disabled="true" to communicate the disabled state to assistive technologies.

 
boolean
 
false
icon icon

Icon name from the specified icon set to display before the tab label. When set, an rh-icon element renders in the icon slot as a decorative visual. Icons complement the text label but should not replace it.

 
IconNameFor<IconSetName>
 
unknown
icon-set iconSet

The icon set from which to select the icon. Defaults to ui.

 
'ui' | 'standard' | 'social' | 'microns'
 
'ui'

Methods 0

None

Events 1

Event Name Description
expand

when a tab expands. The event detail shape includes active (boolean) indicating prior state and tab (RhTab) referencing the expanded element. Cancelable with preventDefault().

CSS Shadow Parts 3

Part Name Summary Description
button

element that contains the interactive part of a tab
icon

Icon

Can contain an <svg> or <rh-icon> element displayed before the tab label text.
text

Tab label

Tab label text. Authors should keep labels short and descriptive.

CSS Custom Properties 7

CSS Property Description Default
--rh-tabs-active-border-color var(--rh-color-accent-brand)
--rh-icon-size —
--rh-tabs-link-padding-inline-end

Padding after tab label

 var(--rh-space-2xl, 32px)
--rh-tabs-link-padding-inline-start

Padding before tab label

 var(--rh-space-2xl, 32px)
--rh-tabs-link-padding-block-start

Padding above tab label

 var(--rh-space-md, 8px)
--rh-tabs-link-padding-block-end

Padding below tab label

 var(--rh-space-md, 8px)
--rh-tabs-link-color

Text color, falls back to rh-color-text-secondary

 var(--rh-color-text-primary)

Design Tokens 17

Token Description Copy
--rh-color-accent-brand
--rh-color-surface
--rh-size-icon-01

16px icon box
--rh-line-height-heading

Line height using rh-line-height-heading token

Line height for headings
--rh-color-text-secondary
--rh-color-surface-lighter

Tertiary surface (light theme)
--rh-color-surface-darker

Secondary surface (dark theme)
--rh-space-lg

16px spacer
--rh-space-2xl

32px spacer
--rh-space-md

Gap between icon and label using rh-space-md

8px spacer
--rh-space-xl

24px spacer
--rh-color-text-primary
--rh-border-width-sm

Inactive box tab side border width

Vertical box tab trailing border width above sm breakpoint

Vertical box tab top border width above sm breakpoint

Vertical box tab hover separator width above sm breakpoint

1px border width; Example: Secondary CTA or Button
--rh-color-border-subtle

Inactive box tab side border color

Vertical box tab trailing border color above sm breakpoint

Vertical box tab top border color above sm breakpoint

Vertical box tab hover separator color above sm breakpoint

First vertical box tab trailing border

Horizontal box tab bottom border above sm breakpoint
--rh-border-width-lg

Tab active border color

Top border uses rh-border-width-lg token

Vertical tab hover indicator width

Vertical box tab hover active indicator width above sm breakpoint

Horizontal box tab hover indicator width

Vertical open tab hover indicator width below sm breakpoint

Vertical open tab hover indicator width above sm breakpoint

Horizontal open tab hover indicator width

3px border width: Example: Expanded Accordion panel
--rh-color-interactive-secondary-default

Vertical tab hover indicator color

Vertical box tab hover active indicator color above sm breakpoint

Horizontal box tab hover indicator color

Vertical open tab hover indicator color below sm breakpoint

Vertical open tab hover indicator color above sm breakpoint

Horizontal open tab hover indicator color
--rh-color-interactive-primary-default

Focus outline, adapts to color-palette
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify