Content
Character Limit
We recommended keeping tab names short and concise, and to use 30 characters at most.
Overview
The Tabs component organizes content into separate views that users can navigate between without leaving the page, showing only one section of content at a time.
Usage
Tabs help organize related content into separate panels that can be accessed without navigating away from the current page, improving content organization and reducing cognitive load.
Variants
Grouped Tabs
You can group multiple pages to go under a dropdown. This should be used when there's a logical relation between pages.
Adaptive Tabs
Adaptive tabs is a prop that when turned on, automatically truncates all tabs that can't fit on the screen into one tab.
Accessibility
Keyboard Navigation
[Tab] to navigate into the listbox.
Focus on the first selectable tab.
If a tab item is selected, focus on that one.
[←/→] to focus and select on previous/next tab.
[Tab] focuses on the next component.
Focus shows tooltip.