Skip to content

TabLine

Description

TabLine is a component for navigating inside a report and grouping homogeneous content in the interface.

Don't use this component in the following scenarios:

  • As the main navigation in your interface; in such cases, use the main menu instead as it provides better visual hierarchy.
  • For switching between states; for this purpose, use either the Switch or Radio components.

Component composition

Component consists of the following:

  • TabLine.Item
  • TabLine.Item.Addon
  • TabLine.Item.Text

Sizes and margins

  • The TabLine.Item has a margin-right: var(--spacing-4x) (except for the last-child).
  • Addons before and after the text have a margin of 8px.
TabLine sizes and margins
Size (height in px)Margins
M (28px)
L (40px)

Types

Depending on the context, you can use TabLine with or without a border-bottom. The border uses the --border-primary token for its color.

Tabs with border (underlined)

Use TabLine with border-bottom to visually separate navigation from the content it switches. This is particularly helpful for secondary navigation on a page.

Tabs without border

Use TabLine with border-bottom to visually separate navigation from the content it switches. This is particularly helpful for secondary navigation on a page.

Addons

Addons inside TabLine.Item have the same margins as addons inside the Button component.

Examples of addons for TabLine
AddonAppearance example
Icon
Flag
Badge
Counter

Note the following:

  • Avoid placing a single icon without accompanying text inside TabLine.Item (tabs with Ellipsis icon is an exception, refer to Usage in UX/UI section).
  • A flag and an icon cannot be placed together in a tab.
  • If both a Badge and a Counter are present inside the tab, the Badge should be placed after the Counter.

Interaction

TabLine states
StateAppearance exampleStyles
Normalcolor: var(--text-primary)
Hoverborder-bottom: 2px solid var(--border-primary)
Activeborder-bottom: 2px solid var(--border-info-active)
DisabledUse --disabled-opacity token.
Initial loadingWhen indicating that data is being loaded for the first time in the counter inside TabLine.Item, use Skeleton with the size of the text's line-height.
LoadingWhen showing that data in the counter inside TabLine.Item is currently being loaded, use Spin with the smallest size (same as in Button).

Animation

When switching between active tabs, the border-bottom moves with an ease transition and a duration of 500ms.

Placement in the interface

TabLine is always placed under the ProductHead of the report, following the title, additional controls, and filters that affect the entire report.

  • The margin between ProductHead content and TabLine is always 24px.
  • The margin between TabLine and the title/widget below is always 16px.

Usage in UX/UI

In cases where you have many tabs or there isn't enough space for the full tab text, collapse the text using an ellipsis.

TIP

Make sure to add a tooltip with the full text message to such collapsed tabs.

Additionally, you can collapse the last tabs into a tab with an Ellipsis icon. By clicking on the last tab with an Ellipsis icon, open dropdown with a list of items that did not fit. The selected item from this list is then placed before the tab with the Ellipsis icon.

Use TabLine to group homogeneous content and navigate through the groups.

TabLine can also be used on settings pages and landings to separate information that differs in meaning.

The rules for the naming and ordering of items are similar to the Pills component, and the rules for the disabled state are also similar to the Pills.

Released under the MIT License.

Released under the MIT License.