Tabs

Guidelines

When to use

• Organize information: Using Tabs decreases content load in the UI by separating information into distinct but related sections. It often improves readability and findability and decreases the user’s cognitive load needed to process information.

When not to use

• Comparing information: When users need to compare information, do not divide it into separate Tabs, as it will complicate the task and may result in mistakes.
• Changing content’s layout, format, or order: Each tab should contain content that is different from the others. If you want to keep the same content but change its layout, format, or order, use Segmented Control instead.
• To navigate within linear flows: Tabs have no hierarchy between each other. The order in which they are visited should be without an impact on the task. This is especially important when using tabs in forms. Therefore, if you are designing a linear flow where the task completion order matters, use a Progress Indicator instead.

 

Segmented Control vs Tabs

Tabs organize content into distinct sections within a single page. When switching tabs, users expect to see different information. When switching segments, they expect the same information in a different layout, order, or format. Segmented Control allows users to toggle between alternate views for the same content.

In the analog-life metaphor, tabs are like separate binders that help you quickly find the document you need. You know it can only be in one binder at a time. Segmented Control acts like a pencil with an eraser. You take that document and change the information’s format, layout, and order, keeping the same information.

 

 

Best practices

While distributing information across Tabs can improve the experience, there are situations in which they might unnecessarily complicate it instead. Before you decide to use Tabs, evaluate whether it’s more effective to:

• Simplify information and decrease the amount of the content.
• Organize information and adjust its format to ensure the best readability. Divide it into sections with clear headings and organize it into lists.
• Use the progressive disclosure rule to keep only the most essential information on the page and open details in a Side Panel.

When in doubt, run a usability test to compare users’ experience with the layout with and without Tabs.

 

---

Variants and properties

Inline

By default, each individual Tab adjusts its width to the length of the label, ensuring that the text is not truncated. In narrow UI like Cards, Side Panels, or on the mobile viewport, it’s more beneficial to set the Tabs component as inline, which distributes the width evenly across all the individual tabs, making them the same width. Inline property should be preferably used with up to 4 Tabs, ensuring that the labels won’t be truncated.

 

Scrollable

The tabs are designed with an automatic overflow feature that activates when they exceed the bounds of their parent container. Tabs become scrollable, and a gradient appears at the Tab's edge to signal that additional tabs are present beyond the visible area.

• On Desktop viewports, the scroll indicator displays an additional chevron Icon Button, providing the user with an additional scrolling interaction besides the click-and-drag pattern.
• On the Mobile viewport, the chevron Icon Button is not displayed, as scrolling is more natural on touch devices and doesn't require additional interaction patterns.

 

---

Behavior

Mouse Interactions

Users can navigate between the Tabs by clicking the enabled, non-selected Tab. The content below will dynamically reload every time a new tab is selected.

 

 

Keyboard interactions