Tabs

Switch between different views

What it solves

Tabs organize content into multiple panels that share the same space, allowing users to switch between views without leaving the page. Only one tab panel is visible at a time, while the tab list provides persistent indicators of all available sections. Tabs reduce information overload by letting users focus on one content section at a time while keeping the full set of options visible and reachable with a single click or keyboard press.

When to use

Use Tabs to organize related content into parallel sections at the same hierarchy level where users benefit from switching between views. Common scenarios include:

• Product pages with Description, Specifications, and Reviews sections
• Settings pages with General, Security, Notifications, and Billing tabs
• Dashboard widgets with different data views (Chart, Table, Summary)
• Code editors showing different files or language previews (HTML, CSS, JS)
• User profiles with Activity, Projects, and Settings sections