Tabs allow you to navigate through different pages or sections that have the same context.

General guidelines

Use the primary Tab to navigate among various sections (e.g.: to navigate between the different main pages of an application).

Use the secondary Tab to navigate within sections having the same content (e.g.: in a Card to change from a visual image to raw data in a table). 

Best practices
  • Always indicate to users where they are by using the active mode of the Tab.
  • Always preselect the first tab from the Home page.
  • Use only two minimum to a maximum of six Tabs. 
  • Place the Tabs in a logical order for the user or in relation to the company environment/business sector.
  • A tab selection is always exclusive. In the case of a staged process, opt for the Stepper element.
  • Use short and clear labels (no more than two words) and no longer than two lines of text. If there is too much content, use a tooltip to provide more detailed information.
Visual guidelines


AppearanceTwo types of tabs exist in 3 different sizes (M, L and XL) on light backgrounds and on dark backgrounds.



A tab has several interactive states (Default, Hover, Active, Focus, Disable).

On a mobile device, use a back ghost button on the top left of the screen.

Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top