Skip to content
Components

TabsWarning: Draft

Tabs are labeled controls that allow users to switch between multiple views within a page.

Before adding tabs, take a step back and check that the information architecture makes sense.

Each tab should represent a distinct, self-contained theme β€” not an arbitrary split in the content.

28853cae-7a66-80ff-a066-f6a03f17bf9b.png
29553cae-7a66-80b7-9901-ce4472593d97.png

Tab labels should clearly signpost what’s behind them using simple, unambiguous language.

Prioritise clarity over creativity β€” avoid jargon, invented terms, or vague wording.

28853cae-7a66-8083-8ae5-f684b1ae1a32.png
28853cae-7a66-805e-b162-e6234d00b175.png

Use concise wording (1–2 words) to make tabs easy to scan.

Ensure naming is consistent within the tab set and across the product.

Reference existing patterns to avoid working in isolation and maintain a cohesive experience.

28853cae-7a66-8059-b9ec-cdbbbb3aae0d.png
29553cae-7a66-8054-978d-fc8dc733431d.png
This page is a draft. Its content is likely to change.