Pills are used as a visually salient way to display a status or summary.

‍

Types

1. Default

For neutral statuses not intended to draw attention.

2. Success

For successful or positive statuses.

3. Warning

For statuses that are not entirely successful or failed. Often indicates acton may be needed.

4. Error

For failed or negative statuses. Often indicates action should be taken.

‍

Messaging

The text within a pill should be as succinct as possible to convey the desired information. An optional icon may be included to the left of the text.

Size

Pills should never be truncated, and should be sized to fit their contents.

Pills may be made to trigger a peek on hover. This can be used to display more details when the pill displays a status summary.