Tab & Tab list

Tabs are used to organize content by grouping similar information on the same page while allowing the user to switch views.

Dimensions

Medium size

Large size

States

Enabled
The enabled state of a tab is when the user’s cursor is not hovering over it, and the button isn’t disabled.

Occupied
Only one tab can be occupied at a time. By default, the tab that is on the left is occupied.

Hover
A tab is in a hover state when the user's cursor is on the tab, but they haven't clicked on it yet.

Disabled
The tab becomes disabled when its action is blocked by a condition that must be completed first, like changing a field value or waiting for a system response. The disabled state has to be supported by an explanatory tooltip to inform the user why the tab is disabled.

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.