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 amargin-right: var(--spacing-4x)
(except for thelast-child
). - Addons before and after the text have a margin of 8px.
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.
Addon | Appearance example |
---|---|
Icon | |
Flag | |
Badge | |
Counter |
Note the following:
- Avoid placing a single icon without accompanying text inside
TabLine.Item
(tabs withEllipsis
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
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
.
TIP
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
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.