Skip to content




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

Do not use this component:

  • for the main navigation in your interface. For this purpose use the main menu instead as it is more appropriate in terms of visual hierarchy;
  • for switching states. For this case use Switch or Radio instead.


Sizes and margins

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


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

Do not place icon without a text inside TabLine.Item.

Addon Appearance example

A flag and an icon cannot be placed in a tab at the same time. If there are badge and counter inside the tab, then place badge after the counter.


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

Tabs with border

Use TabLine with border-bottom to visually separate navigation from the content it switches. Usually it's helpful for secondary navigation on the page.

Tabs without border

Use TabLine with border-bottom if you do not need to separate navigation from the content. Usually it's useful for switching content inside a widget.


State Appearance 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 it is necessary to show that the data in the counter inside the TabLine.Item is being loaded for the first time, use Skeleton with the size of the text's line-height.
Loading When it is necessary to show that the data in the counter inside the TabLine.Item is being loaded, use Spin with the smallest size (the sizes are the same as in Button).


While switching active tabs, the border-bottom moves with ease transition and 500ms duration.

Placement in the interface

TabLine is always placed under the ProductHead of the report, after 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 title/widget below is always 16px.

Usage in UX/UI

In cases when you have many tabs or there is not enough space for the tab text, collapse the text into the ellipsis.

Be sure to add the tooltip with the full text string to such tabs.

Also you can collapse the last tabs into a tab with an Ellipsis icon.

By clicking on the last tab with an ellipsis in the dropdown, it is possible to display a list of items that did not fit. The item selected from this list put before tab with ellipsis.

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

You can also use the TabLine on the settings pages and landings to separate information that differs in meaning.

The rules for the name and order of items are similar to the Pills component. The rules for the disabled state are also similar to the Pills.