Design
Component checklist
Up to date
React
Up to date
Anatomy
- Tab label
- Indicator
- Leading icon (optional)
-
Following informations (optional)
Soul allows the use of a trailing icon, notifier, or promotion badge to extend a tab for extra pieces of information. - Tabs divider (optional)
Variations
There are several variations of tabs. To choose the right one, consider the context of the situation.
-
Default
Tabs in the default state are withou label, icon, or any other visual supplement. -
Notifier
Notifier is a superscript number behind the tab label. This can be used to represent how many elements the tab contains. -
Leading icon
Place a descriptive icon on the leading position of the tab to visually support tab label. -
Combination
Soul also allows using tabs contain leading icon and notifier at the same time.
Tab with the promotion badge
A particular variant of the tab is the promotion tab, which uses the promotion badge. Soul defines this variant for cases when the tab represents a new section, or there is new content under the tab.
Use promotion badges only in small sizes.
Tab with help
Another variant we define is the tab with help, for when we expect users will need explanatory content under the tab or tab itself.
The help icon is placed next to the text value with interaction on hover, showing an explanatory tooltip containing additional information.
Sizes
There are several sizes of buttons. To choose the right one, consider the context of the situation.
-
Medium
Use regular tabs if you need to switch between smaller parts of the UI. For example, in a panel or widgets. -
Large
Use large tabs if you need to switch between large parts of the UI.
Alignment
Tabs can be aligned on the left side of the container, or they can be centered.
Placement
Soul differentiates two types of tabs by their placement. The default variant is mainly used in the context of the page.
The on-header variant is used only in the page header, where we want to align the tab content vertically with the content of the header.
