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

Addon	Appearance 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

State	Appearance example	Styles
Normal		color: var(--text-primary)
Hover		border-bottom: 2px solid var(--border-primary)
Active		border-bottom: 2px solid var(--border-info-active)
Disabled		Use --disabled-opacity token.
Initial loading		When 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.
Loading		When 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.

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.