Skip to content



TabPanel is a component designed for grouping heterogeneous content.

Don't use this component in the following scenarios:

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

Component composition

Component consists of the following:

  • TabPanel.Item
  • TabPanel.Item.Addon
  • TabPanel.Item.Text

Sizes and margins

  • The TabPanel.Item has a margin-right: var(--spacing-4x) (except for the last-child). Addons before and after the text have a margin of 8px.


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

Examples of addons for TabPanel
AddonAppearance example

Note the following:

  • Avoid placing a single icon without accompanying text inside TabPanel.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.



We recommend adding links to tabs so that users can open different tabs of the report in separate tabs using the right mouse button if necessary.

TabPanel states
Normalcolor: var(--text-secondary)
Hovercolor: var(--text-primary)
Activecolor: var(--text-link), border-width: 1px 1px 0px 1px, border-style: solid, border-color: var(--border-primary) border-radius: 6px 6px 0px 0px
DisabledUse the --disabled-opacity token.
Initial loadingWhen indicating that data is being loaded for the first time in the counter inside TabPanel.Item, use Skeleton with the size of the text's line-height.
LoadingWhen showing that data in the counter inside TabPanel.Item is currently being loaded, use Spin with the smallest size (same as in Button).

Usage in UX/UI

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


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 in the dropdown, it is possible to display a list of items that did not fit. The selected item from this list is then placed before the tab with the ellipsis.

Released under the MIT License.

Released under the MIT License.