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

August 6, 2020

Coming soon...

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

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

Eng Description

Code Path & Props

Up to date props can be found at the codepath above.

Example Code