Components

Tabs

Tabs are used to switch content within a section.

Usage

Use Tabs to allow users to switch content within a section. For navigation patterns, consider using the Tabs menu component. For selecting options within a form setting, the Toggle Group could be a more appropriate component.

Navigation and content

The Tabs component is often used alongside a Tabs Menu, at a hierarchically lower level, to further organize content. In contrast, the Tabs Menu component is used for navigation between different pages or sections.

A fictional example where Tabs Menu and Tabs are used in combination for navigation and organization.

When to use the tabs component

Use tabs for switching within a section.

Don’t use the tabs component for navigation patterns where an item link navigates to a separate destination.

Don’t use the tabs component for changing configurations in a form setting.

States

Selected, default, hover, and pressed states are indicated by changes in background and text color.

A. Selected
B. Default
C. Hover
D. Pressed

Formatting

Anatomy

The Tabs component consists of a configurable number of tabs within a container.

A. Container
B. Text label
C. Selected label
D. Default label
E. Close button (optional)

Modify

Label text

Text labels should be clear and concise in order to properly guide the user to their desired content.

Label tabs to clearly indicate what the associated content contains.

Don’t label tabs in an unclear manner.

Stretched labels

The width of the label can either be determined by the length of the text content, or alternatively the labels extend to fill the available horizontal space.

Default

Stretched

Closable labels

Labels can be configured to be closable, typically together with the associated content. In this variant, an icon button is added to the right edge of the label. In the stretched label variant, the label text is adjusted to the left.

Example of Tabs with closable labels.