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 consists of the following:
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.
Note the following:
- Avoid placing a single icon without accompanying text inside
Ellipsisicon 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.
|Disabled||Use the |
|Initial loading||When indicating that data is being loaded for the first time in the counter inside |
|Loading||When showing that data in the counter inside |
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
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
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.