Tabs

Overview

Use tabs to reduce visual clutter and organize content on a page. They help users access related information quickly without navigating to separate pages. Unlike horizontal navigation, tabs should not be used for navigation between different pages.

Design and Layout

Placement and Alignment

Place tabs anywhere on a page, left-aligned with the main content. Align the tab container, not the label, to the grid.

Dos and Don'ts

Do

• Do use short, clear labels that describe the page content.
• Do use between two and five tabs. If you need more, consider reorganizing the content.

Don't

• Don't use tabs if users frequently need to compare information across them. Instead, list the content or use an accordion. Effective typography can make listed content more scannable than tabs.

Accessibility

• Provide an aria-controls="" attribute on the tab button that corresponds with the id="" of that tab's content section.

Installation

Props

Slots