Ripple Design System


The Tag component adds, and draws attention to, a category name for your content.


Use tags to help categorise content. Tags help users to scan and find content that's relevant to them.

Content can have more than one category or theme. Using the tag component helps indicate this to the user.

When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action.

When and how to use

  • Use keywords.
  • Use to draw attention to a category of content or information.
  • Use nouns or adjectives.

When and how not to use

  • Don't use punctuation.
  • Don't overuse tags.
  • Don't use icons in the tags.
  • Don't use as a heading.
  • Don't use more than 2 words.
  • Don't use as a link or action.


Tags have 2 variants:

  • default, for use on neutral backgrounds
  • neutral, for use on white backgrounds.



Use the reverse variant when the chip appears on the primary colour.

Propose a change to this page on GitHub.