Tabs

Usage

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. In a set, each tab should contain content that is distinct from other tabs. Tabs organize content into categories to help users easily find different types of information. The tabs are displayed next to each other in a coherent set, in categories of equal importance. This allows content to be viewed without having to navigate away from that page.

Color usage

To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon using the primary color.

Types

A tab can have one of the following states: enabled, disabled, hovered, focused, pressed. A tab can be set as active or inactive. There are two styles for the tabs: on white background or on a primary color background.

If you have too many tabs, you can use the tabs group of the component with overflow and place more elements.

You can put a top line or a bottom line on the selected tab, it depends on the placement of the tabs in the interface and the associated content.

Tabs can also show notifications patterns.

Anatomy and content

Tab labels provide clear and concise explanations of the content within. Each tab's content is independently categorized and mutually exclusive of the content of other tabs. The content of a tab can be either a label or an icon. To separate the tabs from the content and the rest of the page, you can use a divider under the tabs. You can only have one active tab at a time.

01: Container 02: Active bottom line (Border primary color: #0046FE)
03: Active text or icon (Text primary color: #0046FE) 04: Inactive text or icon (Text neutral color: #002C52 ; 64%)

Icons

Icons communicate the type of content a tab represents in a simple, recognizable way. However, they aren’t as effective as text labels at communicating complex content.

You can’t use tabs with both icons and text labels.

Behaviour and interaction

Users can navigate between tabs by clicking on a tab.

Tab behaviors (active or inactive) and states (enabled, disabled, hovered, focused, and pressed are important to display because they let users know where they are in the experience.

You can add a notification badge to a tab. A red badge with the number of notifications is added to the text or icon of the tab.

Responsiveness and density

Each tab adapts to the size of the text, which is written on a single line. Tabs must be in-line and not too far apart. The "tabs group" component variant allows to place more tabs and overflow if there is insuffisant space;