Pill
Pills are used to highlight important information in a list or form such as a status.
Demo and Developer GuidelinesAnatomy
Label
Labels are uppercase without punctuation.
An example of a pill that wraps. This should not happen unless translation elongates a pill’s label.
Container
The pill can be any of these colors: gray (default), blue, green, yellow, red, cyan and magenta. We suggest using semantic colors (red, yellow, green) for statuses.
Behavior
Status Types
When used for statuses, use the following color assignments.
Color assignments demonstrate general status types. Custom labels can also be used.
Other Usages
If there is a need for a Pilot and Beta pill, please use cyan and magenta pills respectively.
Placement
The pill should always be placed with at least 12px margin on all sides.
Correct
Incorrect
Specifications
Status Types
Color & Typography
