Skip to main content

Tabs

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

Dos and Don'ts

Do
  • 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

Annotated diagram of a tabs component showing its main parts: label, indicator, expand icon button, and icon.
  1. Label: Informs the user the type of content contained within the Tab.
  2. Indicator: Highlights which Tab is currently selected.
  3. Expand (Optional): Icon button for an expanded view on narrow screens — opens a Bottom Sheet.
  4. Icon (Optional): Non-interactive icon that can be used to visually support the label.

Variants

Default

A default tabs component showing three tab items with the first tab selected.

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.

Tabs component using the interactive brand colour variant, with the selected tab indicator shown in brand colour.
Example of tabs with the selected state in brand orange.
Tabs component using the interactive primary colour variant, with the selected tab indicator shown in primary colour.
Example of tabs with the selected state in primary alternative.

Icon

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

Tabs component with icons displayed alongside each tab label.

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.

Behaviour

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.

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.

Tabs component with the scroll position at the start.
Tabs component with the scroll position at the start.
Tabs component with the scroll position in the middle.
Tabs component with the scroll position in the middle.

Expand

On narrow screen sizes, the option to use an Icon Button to open all Tab options within a Bottom Sheet is available if there are a large quantity of Tabs. The Icon Button is always pinned to the right of the screen. The gradient attached to the Icon Button uses its token from the container background the Tabs are sitting on.

Tabs component on a narrow screen with an expand icon button pinned to the right, indicating additional tabs are accessible via a Bottom Sheet.
Tabs component on a narrow screen with an expand icon button pinned to the right, indicating additional tabs are accessible via a Bottom Sheet.
A Bottom Sheet opened from the expand icon button, displaying all available tab options as a list.
A Bottom Sheet opened from the expand icon button, displaying all available tab options as a list.

Narrow

On narrow screens, the spacing of the component is updated to maximise space.

Tabs component displayed on a narrow screen with adjusted spacing to maximise available space.

States

The Tabs allows for two states: unselected and selected.

Selected

Tabs component showing selected state.

Unselected

Tabs component showing unselected state.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

A tab item in its default interactive state.

Hover

A tab item in its hover interactive state.

Active

A tab item in its active interactive state.

Focus

A tab item in its focus interactive state, showing a focus ring.

Disabled

A tab item in its disabled interactive state.

LTR examples

Here are some examples of Tabs in LTR context.

Example of the tabs component used in a left-to-right layout, showing a real-world use case.
A second example of the tabs component used in a left-to-right layout, showing an alternative use case.

RTL examples

Here are some examples of Tabs in RTL context.

Example of the tabs component displayed in a right-to-left layout.
A second example of the tabs component displayed in a right-to-left layout.
Back to top