Nav open / close arrow


Using this Component

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


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.


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.


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.

Related Components

Last Updated

October 9, 2019

Coming soon...

Component code details are not currently available on this site, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.