Labels are enclosed text which highlight a property of an object, such as status, quantity, condition, etc. Beside the text, labels can have icons and semantic meaning.

Behavior

• Generally, labels display static information and aren't interactive. However, they can be part of interactive components, like buttons or cards.
• In some cases, labels can be added and removed (e.g. tag list, multi-select).

Styling

• Only use semantic styles when the context requires it (highlight, warning, error, and success).
• By default, use the low-contrast (faint) color variants for repeated labels (e.g. datagrid columns) or low-priority information (e.g. document status).
• Use high-contrast variants for high-priority information (e.g. warning or error).

Placement

• Labels generally work like inline text, so they can be placed next to inline text, headings, etc.

Best Practices

• Use labels to highlight a property of an object: this user is an “account owner”, this email is “in design”, this KPI is “trending upwards by 5%”.
• Avoid using labels if the property doesn’t need highlighting: use formatted text instead, e.g. in key-value pairs.
• Avoid using labels for interactions and navigation: use small buttons instead.
• Avoid using labels for long lists: use list element instead.
• Avoid using long text in labels: use plain text or Notifications instead.