Tabs
V 1.0View in Storybook
Tab strip with underline indicator on the active tab.
Playground
4
URL
https://design-system-ashu.vercel.app/iframe.html?id=components-tabs--playground&viewMode=story&args=tabCount%3A4Code
<Tabs tabCount={4} />Props
| Name | Type | Default |
|---|---|---|
tabCount | number | 4 |
Usage guidelines
When to use
- Use to organise related content within a single view, reducing vertical scroll.
- Keep tab labels short and parallel in structure — nouns or noun phrases.
- The underline indicator clearly signals which content pane is active.
When not to use
- Don't use more than 6–8 tabs in a strip; consider a dropdown or side nav instead.
- Avoid nesting tab strips inside each other — it creates confusing navigation.
- Don't use tabs for steps in a sequential flow — use a stepper instead.