Ripple Design System

Tag

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

Usage

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.

Variants

Tags have 2 variants:

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

Default

Neutral

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


Propose a change to this page on GitHub.