Tabs

Tabs are interactive elements that organise content into separate sections or views.

Dos and Don'ts

Use tabs to group related information into different categories, helping to reduce cognitive load.
Use when there are two or more subsections of content.

Don't

Tabs should never be used for primary navigation. If tabs become too complex, consider using a standard navigation pattern.
Tabs should not be used if the user is comparing information in two groups, as this would result in the user having to click back and forth to complete a task.

Anatomy

Label: Informs the user the type of content contained within the Tab.
Indicator: Highlights which Tab is currently selected.
Icon (Optional): Non-interactive icon that can be used to visually support the label.
Badge (Optional): Non-interactive element that can be used to visually support the label with a numeric value.

Variants

Default

Modifiers

Colour

By default, the $interactive-brand is used for the Tabs, but an optional $interactive-primary variant is available for use depending on the use-case.

Example of tabs with the selected state in brand orange.

Example of tabs with the selected state in primary alternative.

Icon

Icons can be used to visually support the Tab's label.

Badge

Numbered badges can be used to display a numeric value or count associated with the Tab’s label. A badge shouldn’t be used in conjunction with an icon on a tab.

Content

Labels

Use short tab labels that are clear and specific. Labels should be one to two words, as these are easier to scan.
Text labels should clearly communicate the view users will see and the content contained in the view.
Use sentence case.
Label will not truncate.

Behaviour

Pre-select

The default view is that one tab is preselected and is usually the first tab. Only one tab can be selected at a time. When a user chooses a new item, the previous tab is automatically deselected. If a user navigates away from a tab, a user should return to the last tab selected.

Example of tab component with one tab selected at a time with the others unselected.

Alignment

The label is centre-aligned and a tab group takes the full screen width (considering the container’s additional horizontal padding).

Each tab holds the same width which is determined by the width of the widest tab.

Example of tab component centre-aligned in a mobile screen.

Overflow

Scrolling

When the number of Tabs exceeds the available horizontal container, the Tabs become scrollable. This functionality is available across both wide and narrow screen sizes.