Tabs
Lab componentTabs
Resources
TabNext and TabstripNext switch between different but related content. Users can move between different views without the need to leave the current page. A tabstrip comprises a minimum of two tabs, with one tab actively engaged at any given moment. The active tab is differentiated from an inactive tab by a colored indicator either on the top or bottom edge of the tab, depending on the variant in use. These tabstrips can expand the full width of the page or be used within content areas, or within components such as dialogs, cards, and drawers.
The main tabstrip uses a border to separate the tabs from the rest of the page. You can align tabs inside the tabstrip can be aligned to the left, center or right. Use it to organize content across the main region of an interface under the app header.
The main tabstrip should span the width of the page.
The inline tabstrip has no separator between the tabs and the content below. Use it within an area of a page to switch between related content. Like the main tabstrip, you can align the tabs to the left, center or right.
Don’t use inline tabs standalone outside of the content region it is nested within.
Icons are optional and appear to the left of the label text. An icon can effectively signify the tab’s purpose, as it relates to its underlying content. Additional visual aid makes it easier for users to locate tabs.
Ensure that icon descriptors are used consistently across all tabs within the strip. This helps keep the tabs within the strip equally weighted.
Tabs can feature a badge that serves as a visual cue. They can inform users of additional context, notifications, or new content.