Tabs are used to display subitems or content without refereshing the screen.


Tabs can either be represented by labels or by icons. Don’t mix the two in one pattern as it will clutter the navigation.

With counters

Tabs can have a counter, informing the user about items behind that tab.


On teal, an inverse variant can be used.



The default height is 48px but when the parent is taller, the content is placed in the vertical center.


The inner left and right padding equals 6px for narrow parent containers while for wider containers, 12px is applied. The padding between label and counter is always 6px

Icon tabs always have the width of an iconbutton.