Tabs

Overview Style Guidelines Code Accessibility

Style

Tabs are used to group related content allowing users to navigate a view without leaving the page) Each tab is a text label placed in a visible or invisible container. There are two variants in two orientations and some of the styles and padding shift slightly depending on which variant is used.

Anatomy

Image of tabs anatomy showing horizontal and vertical open tabs and box tabs with lots of annotations
  1. Active tab
  2. Active tab accent
  3. Inactive tab
  4. Divider line
  5. Content area
  6. Overflow button - left
  7. Overflow button - right
  8. Inactive tab surface

Variants

There are two available variants. Open tabs has a more understated style whereas Box tabs has a more traditional style.

Image of open tabs on top and box tabs below

Orientations

There are two available orientations and the only difference is padding.

Image of horizontal, vertical, and tabs with overflow buttons showing padding spacers

Theme

Both variants and orientations are available in both light and dark themes.

Light theme

Image of light theme tabs
Property Light theme
Color - active tab text #151515
Color - active tab accent #EE0000
Color - active tab surface (Box tabs only) #FFFFFF
Color - inactive tab text #4D4D4D
Color - inactive tab surface (Box tabs only) #F2F2F2
Color - disabled chevron icon #C7C7C7
Color - active chevron icon #151515
Color - chevron button surface #FFFFFF
Border width - active tab and chevron button accent 4px
Border width - divider line and borders 1px

Dark theme

Image of dark theme tabs
Property Dark theme
Color - active tab text #FFFFFF
Color - active tab accent #FF542E
Color - active tab surface (Box tabs only) #151515
Color - inactive tab text #C7C7C7
Color - inactive tab surface (Box tabs only) #292929
Color - disabled chevron icon #707070
Color - active chevron icon #FFFFFF
Color - chevron button surface #151515
Border width - active tab and chevron button accent 4px
Border width - divider line and borders 1px

Configuration

The panel for both orientations of tabs does not have a maximum height and should not scroll.

Image of horizontal and vertical tabs construction; several examples showing details like alignment, height, width, and more

Overflow buttons

Overflow buttons are containers with chevron icons that are added to tabs on small breakpoints.

Image of horizontal and vertical tabs with overflow buttons showing padding spacers

Space

Box tabs are separated by a 1px divider.

Image of open tabs spacing for all sizes and orientations
Image of box tabs spacing for all sizes and orientations
Example Token Description
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer
32 --rh-space-2xl 32px spacer

Interaction states

Interactive elements include inactive tabs and overflow buttons.

Hover - Open tabs

Inactive tabs and overflow buttons have the same hover state.

Image of light theme open tabs hover states
Image of dark theme open tabs hover states

Hover - Box tabs

Image of light theme box tabs hover states
Image of dark theme box tabs hover states

Focus - Open tabs

Helpful Tip

The Focus state has the same styles as the Hover state.
Image of light theme open tabs focus states
Image of dark theme open tabs focus states

Focus - Box tabs

Helpful Tip

The Focus state has the same styles as the Hover state.
Image of light theme box tabs focus states
Image of dark theme box tabs focus states

Active - Open tabs

Helpful Tip

The Active state has the same styles as the Hover state.
Image of light theme open tabs active states
Image of dark theme open tabs active states

Active - Box tabs

Helpful Tip

The Active state has the same styles as the Hover state.
Image of light theme box tabs active states
Image of dark theme box tabs active states
© 2021-2024 Red Hat, Inc. Deploys by Netlify
Scroll back to the top