Tabs
Last updated
What is Tabs?
Tabs organise navigation between multiple pages or content sections.
- Active Button State: There should be a clear differentiation between selected and unselected tab buttons.
- Button Icon Support: Icons help show the purpose of the tab buttons when used next to its label.
- Equally-sized tab buttons: Tabs can be used in a relatively small-sized container where you need to switch between a definite number of sections. For such scenarios, it’s better to support a variant where the button’s area is divided equally.
- Keyboard Navigation: All tab buttons should be focusable and navigation between the tab’s component should be accessible from the keyboard.
- Responsiveness: If all tabs on mobile don’t fit into the viewport, users should still have access to all tab buttons. Ways to solve this can be making the button area scrollable for mobile or showing a More button containing a dropdown with the rest of the buttons.
More in stage 9: Project Management
- Project Management
- Avatar
- Input Text
- Banner
- Input Checkbox
- Badge
- Input Radio
- Button
- Input Switch
- Card
- List
- Carousel
- Loading Indicator
- Dropdown
- Modal
- Icon
- Select
- Toast
- Textarea
- Tooltip
- Component Catalog
- Documentation
- Code Style
- Unit Testing
- Accessibility Testing
- Semantic Versioning
- Release Strategy
- Commit Guidelines
- PR Templates
- Contribution Guidelines
- Roadmap
- Milestones
- Ticketing
- Component Analytics
- Logging
- Tooling Analytics
- Service and Health Metrics
- Community Meetings
- Communication Channel
- Open Hours
- FAQs
Tabs: common questions
Can I learn Tabs in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Tabs in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Tabs tutorial for beginners?
It is lesson 99 of 124 in the free Design System roadmap, in stage 9, Project Management. If you are new to Design System, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.