Pill

Pills are used to highlight important information in a list or form such as a status.
Demo and Developer GuidelinesFigma Component

Anatomy

Label

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.

Container

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

Status Color

These are basic examples that demonstrate general status types. Custom labels can also be used.

Placement

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

Specifications