TabLine
Description
TabLine is a component for navigating inside a report and grouping homogeneous content in the interface.
Do not use this component:
Appearance
Sizes and margins
- TabLine.Item has
margin-right: var(--spacing-4x)(except forlast-child). - Margins of addons before and after the text is 8px.
| Size (height in px) | Margins |
|---|---|
| M (28px) | |
| L (40px) |
Addons
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 |
|---|---|
| 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.
Types
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.
Interaction
| 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). |
Animation
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.
