Skip to main content

Tabs

Organize related content and group information displayed in the same context.

Tabs can help you organize related content on the page and enable users to easily navigate between the alternative information within the same context.

View in StorybookExternal link icon

Behavior​

  • If tabs don't fit their container width, they become scrollable or swipeable.

Size​

  • Size S. Use for sidebars, cards, subsections, and sticky headers.

  • Size M. Use for headers and large content sections.

Best practices​

  • Avoid using tabs to indicate action progress—consider using a Stepper instead.
  • Avoid using tabs as a means of primary navigation—consider using an Top bar instead.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Tab item's visual hover state and adds a 2px ring.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Tabs Pattern for guidance on expected keyboard interactions, including roles, states, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.