Tabs are used within a record to divide array filters related to that record into specific groups and also to switch between them.




Figma component

Includes a link to a Figma component that has been imported to Supernova


Use when

  1. grouping the record types that define the relevant main record on show pages or report pages.

Don't use when

  1. the user dynamically selects data and its related subcategories that need to be presented, or when such data needs to be collected and grouped with different contexts on index pages, instead use a content switcher.


3-step tab view

3-step tab view

  1. Tabbed content container
  2. Tab label
  3. Data indicator (optional)
  4. Selection indicator




Default is used for when tab needed to use on table, form or result cards to indicating groups.


Solid is used for when tab needed to use on layout level, to match with app's background color properties.



The enabled type is used to indicate as it is default and the element value is selected or unselected.


While the user hovers over the tag, the background will change.


Selected is the tab group selected or active.


Focus is keyboard selection on a single tab.


Disabled state can be used for the features which not included in that product or unable in the current situation.


Tag (boolean)

The tag can display information, such as the item count in the content list, providing an overview within a tab group.



Tabs are designed to be used together, and they should be used with at least two tabs at once — a tab should not be used alone. Tabs can be defined as a tab-group, which can be incorporated into page or container layouts. When using a tab (or tab-group) within a table, card, or page layout, one of the tab items should be selected when the screen is first launched.

When a user selects a new tab, the previous tab is automatically deselected. Additionally, while switching between tabs, data (or records) may take some time to load. In such cases, a loading indicator can be utilized within the related layout or container.


Tag label

The tab-label on the tab-container must represent the type of record it contains. It should adress the represented record type or action with short nouns. A tab-label should not be used as a phrase of long verbs. If long phrases are used, the tab (or tab-group) will occupy the space it is in.