Tabs

Tabs segregate similar kind of content and allow users to navigate between them without switching the context.

Usage
Code
Interactions

Variants

Basic tabs

This variation consists of only a label.

Tabs with Count

This variation uses the Pill component to display the count along with the label.

Tabs with Icon

This variant consists of an icon along with the label. Icons should only be used when they add additional value to the label. For example, with the help of icons, one can easily see the status without actually navigating to each and every tab.

Dismissible Tabs

This variant consists of a Close Icon Button along with the label. It supports the dismissal of the tabs. These tabs can be triggered through an action button. In case the tab is already open on the screen, the action to re-open the tab should be known to the user.

Dismissible tabs Dismissible tabs

Structure



Basic tabs

Structure of tabs
PropertyValue(s)
Height (of active indicator)2 px
Padding (top, right, bottom, left)12 px, 12 px, 16 px, 12 px
Spacing between tabs0 px
Minimum width (of a tab item)64 px

Tabs with Count

Structure of tabs
PropertyValue(s)
Padding (top, right, bottom, left)12 px, 12 px, 16 px, 12 px
Spacing between pill and label8 px
Spacing between tabs0 px
Minimum width (of a tab item)64 px

Tabs with Icon

Structure of tabs
PropertyValue(s)
Padding (top, right, bottom, left)12 px, 12 px, 16 px, 12 px
Size of icon16x16 px
Spacing between icon and label8 px
Spacing between tabs0 px
Minimum width (of a tab item)64 px

Dismissble tabs

Structure of tabs
PropertyValue(s)
Padding (top, right, bottom, left)12 px, 8 px, 16 px, 0 px
Size of drag indicator16x16 px
Size of close button20x20 px
Spacing between drag indicator and label2 px
Spacing between label and close button2 px
Spacing between tabs0 px
Minimum width (of a tab item)64 px

Configurations

PropertyValue(s)Default value
Label<label>-
Add-on
(optional)
  • Leading pill
  • Leading icon
  • Trailing close icon button
  • -
    Dismissble icon
  • True
  • False
  • False

    Usage


    Tabs vs Navigation

    Tabs have similar kind of content and act as filters. Don’t use tabs to group content that is dissimilar.

    Tabs have similar kind of content and act as filters Tabs have similar kind of content and act as filters

    On the other hand, navigation menu items are generally used to group independent pages.

    Navigation represents independent pages Navigation represents independent pages

    If navigation items and tabs are used on the same page make sure to use them in such a way that while switching between multiple tabs, the user stays on the same page and sees relative data whereas while switching between multiple navigation items, the user is taken to a new page which may or may not be relative.

    Tabs and navigation on the same page Tabs and navigation on the same page

    Tabs within other components

    Tabs are usually paired with components like headers or nested in components like cards, modals, and sidesheets.

    Tabs in a page header Tabs in a page header
    Tabs in a modal Tabs in a modal
    Tabs in a card Tabs in a card

    Tab label

    Tabs should have short and scannable labels, generally limited to a single word.

    Maximum tabs

    Too many tabs can unnecessarily clutter the UI. Hence it is recommended not to use more than 5 tabs at once.

    Opening behavior of dismissible tabs

    Dismissible tabs are opened as the right-most tab in a tab group. They stack up towards the right in the order they are opened.

    Dismissible tabs are opened as the right-most tab in a tab group Dismissible tabs are opened as the right-most tab in a tab group

    Closing behavior of dismissible tabs

    All tabs can be dismissible if they are used inside a container like card, modal, sidesheet, etc. Closing the last tab will close the container.

    Though in most of the cases, the dismissible tabs are opened from basic tabs and hence there is no need for closing the container in those cases.

    Reordering behavior of dismissible tabs

    Dismissible tabs can be reordered through drag and drop. The order of basic tabs cannot be changed in any case though.

    Reordering of a dismissible tab Reordering of a dismissible tab

    Tabs overflow

    In case of overflow, the additional tabs are shown in an overflow menu. When a tab is selected from the overflow menu, it replaces the last visible tab from the tab group.

    Overflowing in a tab group Overflowing in a tab group

    Was this page helpful?