Pill

Also known as

Tag, Chip, Badge

Pill is a small visual element that can contain descriptive text and an icon. You can use pills to label, tag or categorize content. With pills, users can trigger actions, make selections or filter results.

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 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.
  • When the content is a system message that doesn't support interaction. Instead, use Badge.

To import Pill from the core Salt package, use:

NameTypeDescriptionDefault