Tab

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

Status

Status

Healthy

Figma component

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

Principles

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.

Structure

3-step tab view

3-step tab view

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

Properties

Types

Default

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

Solid

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

States

Enabled

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

Hover

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

Selected

Selected is the tab group selected or active.

Focus

Focus is keyboard selection on a single tab.

Disabled

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

Properties

Tag (boolean)

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

Behavior

Interaction

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.

Content

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.