Tabs are used to organize content by grouping similar information on the same page while allowing the user to switch views.

Component checklist


Up to date


Up to date


Usage - Anatomy
  1. Tab label
  2. Indicator
  3. Leading icon (optional)
  4. Following informations (optional)
    Soul allows the use of a trailing icon, notifier, or promotion badge to extend a tab for extra pieces of information.
  5. Tabs divider (optional)



There are several variations of tabs. To choose the right one, consider the context of the situation.

Usage - Variants
  1. Default
    Tabs in the default state are withou label, icon, or any other visual supplement.
  2. Notifier
    Notifier is a superscript number behind the tab label. This can be used to represent how many elements the tab contains.
  3. Leading icon
    Place a descriptive icon on the leading position of the tab to visually support tab label.
  4. 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.

Usage - Promotion badge


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.

Usage - Help



There are several sizes of buttons. To choose the right one, consider the context of the situation.

Usage - Sizes

Usage - Sizes

  1. Medium
    Use regular tabs if you need to switch between smaller parts of the UI. For example, in a panel or widgets.
  2. Large
    Use large tabs if you need to switch between large parts of the UI.



Tabs can be aligned on the left side of the container, or they can be centered.

Usage - Alignment



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.

Usage - Placement