Label
Usage
When to Use
Use labels to classify items or to give additional information to specific items. You can make labels clickable so that users will be able to quickly filter items.
Use labels to draw attention to important information.
Use labels to indicate the current selection.
When Not to Use
If the information displayed is not essential, consider using simple text or text in combination with an icon instead.
If you want to present more than just a few words, or the information should particularly stand out, use a banner instead.
Variants
Informative Labels
Informative labels give some information related to a specific item.
Removable Labels
If the label indicates a selection, the label shows a ‘close’ icon on the right. Clicking the icon allows users to remove the label.
Additional Content
You can add icons and images to your labels. This can help classify them or to make them stand out.
Color
Labels are available in 5 colors.
Grey labels are used for neutral information.
Blue labels are also used for neutral information. Due to their color, they appear more prominent compared to grey labels.
Red labels are used for critical and erroneous information.
Yellow labels are used for warnings and important information.
Green labels are used to show successful information.
Consider using grey labels for successful information instead of green labels, if you want red and yellow labels to stick out more.
Content
Keep your labels short. They shouldn’t contain more than two words. If some labels need further explanation, consider adding a tooltip.
Use sentence capitalization for labels.
Layout
Position labels close to their related content. Learn more about the correct positioning of content in the Sizing and Spacing guidelines.
If you position the label to the left of its related content, use 4px of vertical spacing.
