Pills

Definition
Pills, also known as chips or badges, are small elements that represent a functional status or content category in text or numeric form. Pills provide visual cues to help users distinguish content by categories and taxonomies.

Pills are often conflated with buttons because they contain padding and text and are rounded, but they are not buttons unless designed exclusively for interactivity. And though tags are visually similar to pills, tags are used specifically to label content in order to help users search, filter, and navigate. 

Tooltips are also sometimes confused with pills, but tooltips offer users a short message, often detailed information or a full description that appears without the use of a click command when a user hovers over a page element.

Usage
Pills should be used as visual “groupers” to help users understand distinctions between types of content and to improve content organization. Pills can also be used to display taxonomy terms within a content management system.  

Differences Between Pills and Buttons

• Pills offer visual grouping and labeling of content; buttons are a call to action.
• Pills should always be smaller than their counterpart buttons within a design.
• Pills are assigned by the system; buttons are created and customized by the content manager.

Colors
The color contrast of a pill and its background must meet the university accessibility standard. Pill color should also match the intended function or activity. For multiple activities on the same page, pill color should be graduated, with more active elements having darker, richer hues.

Specifications 
As a general guideline, a pill should always be smaller in size than its counterpart button within the same design or design system.
 

Examples