Pill

Color

Pills are available in different semantic colors to support their use case.

Icon and Label

Pills can have labels with leading or trailing icons, or only an icon.

Spacing

When grouping pills next to each other, always use 8px spacing for consistency.

Use of Icons

Only use an icon that is universally understood and accessible. Use icons only when necessary and strongly associated with the label text. Avoid decorative-only icons.

Pills Are Not Interactive

Pills are for data display only. They are not clickable or focusable and should not be used as triggers for tooltips or popovers.

Format and Best Practices

• Length: 1-3 words
• Capitalization: use Title Case
• If in a series, keep labels all nouns or all verbs when possible
• Use past tense for completed actions, such as Published
• Use present tense -ing form for ongoing actions, such as Processing or Loading

As a status message:

• Describe what state a file, content item, or system is in
• Use terms users already see in the interface