Tabs

Allows users to navigate between different views within the same context by clicking on tab.

Type

Pill: Features a pill-shaped design where the active tab is highlighted.
Enclosed: Encases the entire tab group in a container, with the active tab highlighted using a different pill style.
Line: Uses a line beneath the active tab, typically in a brand color, to indicate the selected tab within the group.

Small: Typically used for small components or on smaller devices like mobile phones.

Medium: Commonly applied to medium or large-sized components or devices such as tablets and desktops.

Tabs can exist in several states, each providing visual cues to the user about its current status and interaction possibilities.

Default: The initial state of the tabs when it is ready for user action but not currently interacted with.
Focused: An element appears when it is selected or active, usually through keyboard navigation (TAB) or a mouse click. This state is crucial for accessibility, helping users identify the currently active element.
Hover: An element appears when a user moves the mouse pointer over it. This state provides a visual feedback to indicate that the element is interactive.
Active: Occurs when a user has clicked on the tab component, indicating that the tab is selected.
Active+Focused: Occurs when a user has clicked again on the active tab component, indicating that the tab is selected and active.

Leading icon: Placed before the text inside a tab. It visually enhances the button by indicating the action's purpose at a glance. E.g. Table icon, Profile icon, Settings icon, List icon

Counter: Positioned after the text within a tab, it typically displays the number of new or current items contained in that tab.