Label
Tab items should have a label for accessibility. If a label isn’t present, it must include an icon and become an icon-only tab item.
Navigation
Tabs
Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit. For accessibility, users should be able to click through the tabs, or use arrow keys.
Examples
First tab panel
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto praesentium modi mollitia perspiciatis, sunt enim saepe velit tempore.
Second tab panel
Magnam fuga vero facere nulla itaque facilis, eos doloremque error maiores amet fugiat ullam et officiis voluptatum obcaecati hic odit similique consectetur enim alias assumenda, natus!
Third tab panel
Cumque doloribus fugit, eos neque nulla quidem excepturi iusto magnam possimus odit enim labore aut quas error maxime nam minima quae, libero tempore sint!
Options
Icons
Icons can be displayed in tab items. Icons should only be used in a tab item when absolutely necessary: when adding essential value and having a strong association with the label. Icons should not be used just as decoration. If the tab item does not have a visible label, it must still have a tooltip to disclose the label.
Selected
A tab item in a selected state shows the current tab item. This is shown with a selection indicator (a solid thicker line) under or next to the selected tab item. Only one tab item can be selected at any given time. This property changes an individual tab item’s selected state.
Disabled
A tab item in a disabled state shows that the tab item exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that the tab item may become available later.
Orientation
Tabs can be either horizontal or vertical. By default, tabs are horizontal and should be used when horizontal space is limited. Vertical tabs should be used when horizontal space is more generous and when the list of sections is greater than can be presented to the user in a horizontal format. They can also be used as an anchor link experience when displaying shortcuts to sections of content on a single page. Rather than exposing a new tab view, the tab items can link to an on-page anchor.
Subtle
By default, tabs have a divider that spans across all tab items. This style works as a way to anchor them to the page. These types of tabs are best used at the top of a page, as a top-level navigation. Alternatively, subtle tabs have no visible divider across the tab items apart from the one that shows the selected tab item. These should be used as sub-level navigation or for containers.
Primary
By default, tabs are not emphasized. This is optimal for when the tabs component is not the core part of an interface. Primary, or emphasized, tabs have brand color text for the selected state for visual prominence and to draw more attention to them. This is optimal for when the selection should call attention, such as the main navigation for an application.
Alignment
Tabs have the option to set the alignment of tab items to start (left), center, or end (right). By default, tab items are aligned to the start (left) of the container. Center-aligned tabs are often used as top-level navigation. Tabs can also stretch to fill all of the available space.
Implementation
Example Name
Description and implementation notes
<p> code example </p>Information
Checklist
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).
All Color Schemes
Works properly across all color schemes (light, dark).
Accessible Contrast for Text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible Contrast for UI Components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Defined Options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).
Defined Behaviors
Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing Guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Internationalization Guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard Interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design Tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI Kit
Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.