Deprecated/Components/Tabs

> **⚠️ DEPRECATED**: This component is deprecated and should not be used in new projects. Tabs are based on the folder metaphor and used to separate content into different sections. Tabs should be ordered based on priority to create visual hierarchy.

**Use tabs if:** - Your business objects need to show multiple facets at the same time. - You want to allow the user to browse through these facets. - You need a prominent or very visual filter on top of a list. - You have clear-cut process steps that need to be visualized. **Do not use tabs if:** - You plan to use only one single tab. - You plan to use only one single tab.

By default, tabs are displayed in a bar and are either inactive or active (highlighted in blue). The bar can also contain actions that apply to the whole page. The example below illustrates the tabs component in cozy mode with no horizontal padding.

Tabs can be displayed with counters to indicate that there are a number of resources the user can or should access. To display counters, wrap the \

Tabs can be navigable by applying the \

Tabs can display icons instead of text with the \

Tabs can be displayed in subsequent steps, indicating to the user that there is a process to follow. To display tabs in process mode, add the \

Tabs can be displayed in filter mode, indicating to the user that a value has been filtered into separate tabs. To display tabs in filter mode, add the \

Tabs can be displayed with semantic colors to indicate a status. To display semantic tabs, add the following modifier classes to the \

Tabs can be displayed in filter mode with semantic colors. As detailed in the previous examples, add the \

Tabs can be displayed with inline text in semantic colors. To display inline text tabs, add the \