Intergalactic – Design System

Description

TabPanel is a component for grouping heterogeneous content.

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.

Appearance

Sizes and margins

TabPanel.Item has margin-right: var(--spacing-4x) (except for last-child).
Margins of addons before and after the text is 8px.

Addons

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

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

Addon	Appearance example
Icon
Flag
Badge
Counter

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.

Interaction

We recommended to add links to tabs, so the user can open different tabs of the report in different tabs with the right mouse button if necessary.

State	Appearance	Styles
Normal		`color: var(--text-secondary)`
Hover		`color: var(--text-primary)`
Active		`color: var(--text-link)`, `border-width: 1px 1px 0px 1px`, `border-style: solid`, `border-color: var(--border-primary)` `border-radius: 6px 6px 0px 0px`
Disabled		Use `--disabled-opacity` token.
Initial loading		When it is necessary to show that the data in the counter inside the TabPanel.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 TabPanel.Item is being loaded, use Spin with the smallest size (the sizes are the same as in Button).

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.

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.