Label

Anatomy

Guidelines

Label vs Badge

Labels and Badges both convey information in visually similar ways but are not interchangeable:

• Labels emphasize status or categorize an item with words, such as "Active" or "Draft."
• Badges display the quantity of an item with a numeric value, such as showing how many notifications a user has.

Label vs Tag

Labels and Tags share visual similarities that may be easily misconstrued. Be sure to understand the fundamental difference between them as they are not interchangeable:

• Labels are read-only indicators set by the system or application. Users have no direct control over their creation.
• Tags may be user-generated and interactive. Users create them for categorization and filtering and can edit or remove them as needed.

Best practices

Color use

Color can be helpful for conveying meaning to users when used with descriptive text. Labels include a range of colors available for use. When using color, be consistent with their usage across the app. Avoid using color purely for decoration to fit a particular color scheme.

For more information regarding color and accessibility, see Color and Meaning.

Status indicators

Status indicators are small dots added before the Label's text to visually emphasize a process's current status.

Labels can only become status indicators using the following common status colors:

• Red: Critical, destructive, not functioning
• Yellow: Warning or caution
• Green: Success, confirmation, or functional
• Blue: Info
• Grey: Neutral

Appearance

Variants

When deciding what Label variant to use, consider what versus where. Each available variant solves a particular use case.

• Base Labels have no status indicator dot. They're intended to be used for categorical attributes, that is, an attribute that describes what something is. Stables properties such as types, tiers, roles, tags, etc. fall into this category.
• Status Labels include the status indicator dot. They're intended to be used for operational status. An operational status describes where something is in its lifecycle and represents a live, mutable state. "Online/offline," "running/scheduled/stopped," and "active/draft" are all examples that fall into this category.

Colors

Labels are available in a range of colors. The default is grey.

Font weight

Label text is bold by default for readability and emphasis. Use a lighter font weight for cases where the Label should be less visually prominent. Light text is not compatible with status indicators.

Content

It's important to accurately and concisely describe the category or status using the Label. Use sentence case, but avoid full sentences and verbs. One to two words without punctuation is preferred.