Tabs

Tabs organise navigation between multiple pages or content sections.

• Active Button State: There should be a clear differentiation between selected and unselected tab buttons.
• Button Icon Support: Icons help show the purpose of the tab buttons when used next to its label.
• Equally-sized tab buttons: Tabs can be used in a relatively small-sized container where you need to switch between a definite number of sections. For such scenarios, it’s better to support a variant where the button’s area is divided equally.
• Keyboard Navigation: All tab buttons should be focusable and navigation between the tab’s component should be accessible from the keyboard.
• Responsiveness: If all tabs on mobile don’t fit into the viewport, users should still have access to all tab buttons. Ways to solve this can be making the button area scrollable for mobile or showing a More button containing a dropdown with the rest of the buttons.