Design
Web component
Is documented
Status
Healthy
Figma component
Principles
Use when
- grouping the record types that define the relevant main record on show pages or report pages.
Don't use when
- 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
- Tabbed content container
- Tab label
- Data indicator (optional)
- 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.