Pill

Pills are non-actionable small text-based elements to emphasize information.

Overview

Not interactive, use to highlight information or status. Use pills to:

  • Label an element (to name the element or the category it belongs to)
  • Show status (active, inactive, deactivated, etc.)
  • Highlight a specific marketing benefit (not more than once per page). E.g.: Save 80%, Fast & compliant.

Don’t use for due dates (when they’re not yet overdue), pricing information (unless there’s a discount, like stated above), general marketing information (especially if it’s long).

 

Content

  • Sentence case
  • Ideal: 3 words max. In no case it should exceed 24 characters or ellipsis will appear.
  • Avoid button-like copy, such as “Add contact info” or using active verbs
    • Pills give information about a status, they don’t tell you what to do next
  • Focus on descriptive labels that are concrete, clear and concise.
    • Do: Active, Inactive, Terminated, Processing, Done, Awaiting authorization, Action required, Failed, Paid, Refunded, etc.
    • Don’t: Send reminder, Learn more, Add contact info, etc.

If relevant, add duration info into the pill (e.g. 1 task • 2 mins). Do so sparingly, mostly around onboarding type tasks, and never exceed 24 characters.

 

Types

Status

Pill-Example-Status

 

Promotional

Pill-Example-Promotional

 

Best Practices

Do
Pill-DoDont-Do
Don’t
Pill-DoDont-Dont

 

Resources

(internal only)

Figma

Storybook

 

 

Badges

Chips

Pills

Interactive

No

Yes

No

Used for labelling

No

No

Yes

Use

Indicate status, notification, or event

Select from 2-3 options

Highlight information or status