Use title or sentence case when labelling pills. This maintains a visual distinction between Pill and Button, which always has uppercase labels.

Position any pill you’re using to tag content below or on the right of the related content, so that it’s not the primary focus.

Never apply red/amber/green status colors to pills to differentiate between categories. Use icons or text instead.

• To organize interactive content mapped to more than one category, providing users with a way of distinguishing different content types and categories.
• To trigger an immediate action—such as changing the view of currently displayed content or going to a new page contextually related to the pill.
• To enable an action that could change depending on the context. In a messaging application, you could use pills to display predefined replies that change depending on the received message.

• For nonfixed actions that may change depending on the context. Instead, use Button.
• To display counts, notifications or if you need a small, compact piece of information to be displayed inline, for example ‘New’. Instead, use Badge.
• When interaction is not supported, use Tag. Tags and Pills both categorize content in an app, but while Pills are interactive and allow users to filter or sort content, Tags are read-only and simply display metadata.

To import Pill from the core Salt package, use: