Tabs

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

Content

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.

Inverse

On teal, an inverse variant can be used.

States

Height

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

Width

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.