Pill

Pills are used to highlight important information in a list or form such as a status.

Anatomy

Labels are uppercase without punctuation.
‍
Character count limit: 30

An example of a pill that wraps. This should not happen unless translation elongates a pill’s label.

The pill can be any of these colors: gray (default), blue, green, yellow, red.‍

Color assignments demonstrate general status types. Custom labels can also be used.

The pill should always be placed with at least 12px margin on all sides.

Correct

Incorrect