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.
- Show a new feature within the product, or early access to that feature (Beta)
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
Promotional
New & early access
General best Practices
“Early access” pills best practices
“Early access” pills imply that the product is still being enhanced. Because of that, there must be a learning mechanism in place to actually improve the product and the feature should only be released to a select audience.
Do:
- Add the “early access” pill to a single page heading
- Display the pill for a predefined period of time (i.e. plan for the removal of the pill at a given point)
- Use it only for significant features or enhancements
- Stack heading and pill on mobile
Don’t:
- Add the “early access” pill to the side navigation
- Leave the pill visible forever
- Add it for small UI changes or small feature enhancements
Resources
(internal only)
Related components