Tabs
Tabs organize content into manageable sections. Clear navigation and presentation for efficient user interaction.
- Overview
- Specs
- Guidelines
Component
Tabs are a versatile UI component used to organize content into distinct sections, facilitating navigation and enhancing user experience.
With intuitive tab labels and clear visual indicators, users can easily switch between different sections of content, such as categories, settings, or views.
A: Regular variation
B: Removable variation
C: More Options variation
1: Selected indicator
2: Left icon
3: Label
4: Badge
5: Right icon
Used for:
Forms
When a form has different sections that can be divided by categories, consider using Tabs;
Modals
When a modal has integrated forms, Tabs can also be used, for the same reasons as regular forms;
Conservation of screen space
Tabs help conserve screen space by allowing users to switch between content sections within the same viewport, minimizing the need to scroll or navigate to separate pages;
Contextual grouping
Tabs facilitate the contextual grouping of related content, allowing users to understand the relationship between different sections and access them seamlessly;
Progressive disclosure
Tabs support progressive disclosure by revealing additional content or functionality as users navigate between Tabs, helping to manage complexity and present information in a structured manner;
Don’t use for:
Limited content
If the content within each Tab is minimal or insufficient to warrant its own section, using Tabs may create unnecessary complexity. Consider using accordions in this case;
Confusing navigation
If the number of Tabs is excessive or if the Tab labels are unclear or ambiguous, users may struggle to understand the navigation structure;
Overlapping content
If the content within different Tabs overlaps significantly or if there is redundancy between Tabs, Tabs may not effectively organize the content and could confuse users;
Sequential tasks
Tabs are not appropriate for guiding users through sequential tasks or linear processes where each step builds upon the previous one. In such cases, use a stepper.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated typography;
- Updated icon font;
Related
Company Configuration
States
Not Active
Enabled
.enabled {
color: var(--grey-7);
}Hover
.hover {
background-color: var(--grey-3);
color: var(--grey-8);
}Pressed
.pressed {
background-color: var(--grey-4);
color: var(--grey-8);
}Disabled
.disabled {
color: var(--grey-6);
}Focus
.focus {
background-color: var(--grey-3);
border-color-bottom: var(--grey-8);
color: var(--grey-8);
}Active
Enabled
.enabled {
border-color-bottom: var(--theme-100);
color: var(--theme-100);
}Hover
.hover {
background-color: var(--theme-10);
border-color-bottom: var(--theme-100);
color: var(--theme-100);
}Pressed
.pressed {
background-color: var(--theme-20);
border-color-bottom: var(--theme-100);
color: var(--theme-100);
}Disabled
.disabled {
color: var(--grey-6);
}Focus
.focus {
background-color: var(--theme-10);
border-color-bottom: var(--theme-100);
color: var(--theme-100);
}Size
Unique size
.uniqueSize {
padding: var(--spacing-16, --spacing-8);
gap: var(--spacing-8);
icon: 20px;
label: var(--button-regular);
badge: 8px;
badge-color: var(--error-100);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
Responsive
Tabs should be under the header to make them easier to access and reduce space. The options located in the Drop-down – Add Areas icon must be in a Tab labelled More Options and must open a modal (when active).
Add Tab
When the + icon is visible, it indicates that new tabs can be added, but on the other hand, only six tabs can be visible at the same time. The rest must be grouped under this icon.
Dos & Dont’s
Labels should be short and concise, no more than two words. If this is not possible, the text should be cut off and a tooltip should contain the full text (in the hover effect);
Avoid using more than six Tabs;
Do not use Tabs to replace a flow.
Case Studies
Release v1.2
Driving to a new destination without GPS?
