Pill
Pills are used to highlight important information in a list or form such as a status.
![Pill intro image](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/605ce564f1b977744bfe65c6_pill_intro.png)
Anatomy
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/626ff79e10025c4bdc669380_pill_anatomy.png)
Label
Labels are uppercase without punctuation.
![Pill label that wraps](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/605ce582fa0113cde29b0ead_pill_label_wrap.png)
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6270010ed7e73b8efb30d689_pill_anatomy_3.png)
Behavior
Status Types
When used for statuses, use the following color assignments.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6270015add07d16790499eee_pill_status.png)
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/627001924b35c763226ad0f7_pilot_beta.png)
Placement
The pill should always be placed with at least 12px margin on all sides.
![Correct usage of a pill with 12px margin](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/605ce6051e16705783a84391_pill_correct.png)
Correct
![Incorrect usage of pill with no margin](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/605ce6453e465b730fbdc6f9_pill_incorrect.png)
Incorrect
Specifications
Status Types
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/627028dd5cdb595ea2f1621e_pill_padding.png)
Color & Typography
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/62702946d00c24fdc9e0d503_pill_color_typo.png)