HPE
Design System
Foundation
Components
Templates
Extend
Components

Tabs

Tabs allow a user to access content while maintaining the existing context.

Open in Grommet Designer
Open in Figma
Open docs

Guidance

Tabs can be used to rapidly navigate between different content while maintaining the existing context. The Tabs component serves as the outer wrapper and contains individual Tab components as children.

Usage

To create a set of Tabs, use the Tabs component as the outer wrapper with Tab components as its children. Providing a title prop to a Tab will populate the text on the actual tab. The children of each Tab will be the content that displays when the given tab is active.

It is recommended that you do not use more than 5 tabs in a group. In order to create the most effective user experience, keep the number of tabs to a minimum. This allows the user to easily understand the scope of the information presented to them. With more tabs, the information can become overwhelming.

Keep labels short. Using a simple, concise label such as "Settings" or "Notifications" helps the user easily decide which tab contains the content they need. Longer labels may clutter the layout and create a more effortful experience for the user.

If using Tabs as a navigation structure, be sure to connect them to the browser location. This will allow proper active styling and routing to function.

If using Tabs as a navigation structure, don't use them in conjunction with other navigation structures such as Global Sidebar. Combining multiple navigation structures creates a confusing experience for the user. It can lead to difficulties in navigating through an application and in ability to remember where desired content lives.

Accessibility

Accessibility features such as role and aria-selected are built into Tabs. When a tab is selected, aria-selected is switched to true and toggled to false for all other tabs within the group.

If you would like to provide a custom aria-label for screen reader users, you can do so by providing a string to the a11yTitle prop.

Variants

Tabs can be used to control what information is presented to a user at a given time. They are effective for grouping information and allowing users to move between those groups without leaving their existing context.

Tabs with icons

An icon can be used on a Tab to provide additional context about the information contained within the tab. It is recommended that an icon is used in conjunction with a title to ensure the context of the tab is clear.

Open docs

Tab states

An individual Tab can take on various states: enabled, disabled, hover, and active. The styling of a tab differs between each of these states as an indicator to the user.

Open docs

Related

Related content you may find useful when using Tabs.

Components
Button
Buttons are used to indicate actions that can be performed.
Components
Menu
Menu contains a list of actions. When a menu item is clicked, the menu closes and the action is executed.
HPE Global Sidebar Preview
Extend
Global Sidebar
For use when building applications and services that live in the HPE eccosystem.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page