Documentation Index
Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
Use this file to discover all available pages before exploring further.
Tabs
In progress | Storybook link coming soonWhen to use
- To organize content into sections that users need to switch between frequently.
- When sections are related and share the same context.
- To display mutually exclusive content without overwhelming the user.
- For navigation within a page or primitive (e.g., dashboards, settings, data views).
When to use something else
- Simple data filtering: use Segmented control or a filter Button with Menu.
- User must see multiple sections at once: keep one page and use Accordion or filters—not mutually exclusive Tabs.
- Binary on/off: use Switch.
Dos and don’ts
- Do use a minimum of two Tab buttons.
- Do be mindful of persistent and non-persistent CTAs when using Tabs. Content above Tabs should remain the same across Tabs.
- Don’t use for binary options.
- Don’t use Tabs for basic filtering functionality.
- Don’t be inconsistent with leading icon usage. If using in one, use them in all.
Placement & alignment
Placement:Tabs are typically placed at the top of a page or section, often within the main content area, Topbar, or side panels. Always place Tabs close to the content they control and ensure Tab placement is consistent across pages or flows. Alignment
- Tabs allow for a default and vertical alignment, which essentially shows or hides label padding on each tab Button. This is similar to how Buttons behave.
- Tabs can also be displayed in full width, where the spacing between tabs adjusts evenly allowing the primitive to fill the parent container’s width. Consider the surrounding content and container when deciding which to use. This is best used in side panels or when there are a lot of Tabs that take up the entire width of the container.
Behavior
- Exactly one tab panel is visible at a time for a given tab set; tab buttons update
aria-selected/ roving focus per implementation. - Content above the tab list should stay stable across tabs; don’t move primary CTAs in ways that disorient users when switching.
Often used with
- Tab panels containing Data grid, forms, Cards, or Empty state; keep global page actions outside the tab panel when they must not move.