Using this Component
Pills are used as a visually salient way to display a status or summary.
For neutral statuses not intended to draw attention.
For successful or positive statuses.
For statuses that are not entirely successful or failed. Often indicates acton may be needed.
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.
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.