Tabs

Usage

Tabs are used to organize and navigate between related views at the same hierarchy level. Tabs can include icons to reinforce labels and counters to inform about the tab's content.

Use short and scannable labels, with as few words as possible.

Don't

Don’t use long names as a label.

Be consistent with the use of icons, and use them to reinforce the label.

Don't

Don’t use icons for decorative purposes only, or if they don’t have a clear connection to the label.
Don’t use icons only for some selected tabs.

Use counters in tabs to provide meaningful feedback, for instance, notifications about specific sections.

Don't

Use counters sparingly as you can overwhelm users and reduce the effectiveness of the feedback. Instead, balance the need for each section and display the strictly necessary.