Use tabs to alternate among related views within the same context.
Figma
The Figma reference for Tabs will appear here once the design link is added.
Storybook
Interactive examples for Tabs will render here once the Storybook link is wired in.
Best practices
- Represent the same kind of content across tabs, such as one list with different filters — don’t group dissimilar content.
- Keep only one tab active at a time.
- Let people complete their work within a tab rather than jumping back and forth.
- Don’t use tabs for primary navigation.
Do’s and don’ts
Do
Use short, scannable labels, usually a single word: “All”, “Open”, “Unpaid”.
Don’t
Write long, sentence-like tab labels or repeat the section name in each tab.