Tabs

Tabs allow users to move between different views of related content without leave the current page. A tab strip includes at least two tabs. Only one tab is actively engaged at a time and is differentiated from inactive tabs by a colored indicator either on the top or bottom edge of the tab, depending on the variant. Tab strips can cover the full width of the page or be limited to content areas within components such as dialogs, cards, and drawers.

Also known as: Tab, Tabstrip, Tab bar, Tab set
Salt package@salt-ds/core
Code

Using the components

When to use

  • Use tabs to organize logically related but mutually exclusive content on a single page.
  • Use tabs to prevent users from navigating to another page to complete a task.

When not to use

  • Don’t use tabs when users need to compare information between views.
  • Don’t use tabs to communicate progress. Instead, use Stepper.
  • Don’t use tabs for primary navigation, taking the user off the current page. Instead, use NavigationItem.

Content

  • All labels should be short and concise.
  • Labels should clearly communicate the underlying view.
  • Always use sentence case in labels.
  • Always use sentence case for badge labels when nesting in a tab.
  • Do not wrap labels. Use truncation with Tooltip if necessary.
  • Icon and text should match each other semantically.
  • Each Tab and matching TabPanel must use a unique value within a single Tabs.

Import

To import Tabs and related components from the core Salt package, use:

Props

Tabs

TabBar

TabList

Tab

TabTrigger

TabAction

TabPanel