Tabs

24.6

Organizes content into separate views

Tabs

24.6

Organizes content into separate views

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.

Content Guidelines

Tabs are used to organize related content into clearly labeled sections. Tab labels should be concise and easy to scan so users can quickly understand and navigate between them.

We follow these basic rules while writing content for tabs:

Character limit

  • Keep tab names short and concise.

  • Use 30 characters or fewer whenever possible.

Clarity

  • Tab labels should clearly describe the content they represent.

  • Avoid vague or overly generic labels.

Casing

  • Use Title Case for tab labels.

  • Keep proper nouns as is.

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.

Help make this page more useful.

Help make this page more useful.