A tag represents a set of keywords or attributes that help label, organize and categorize objects.

Design Guidelines#

Use when#

  • To add attributes to, and remove attributes from, an object.
  • To filter objects by attribute.
  • To apply or remove multiple attributes to an object.

Don't use when#

  • You are trying to convey a status. Instead use Badge


  • A user can search for, and add one or multiple tags using the Input component.
  • A user can add one or multiple tags to an object by making a selection from a list.
  • A user can remove a tag using an "X".
  • A user can click on a tag to filter by that particular categorization or label.


  • Tags should only contain a single word.
  • Avoid icons with the exception of "X" to remove.

Visual Style#

  • Always use the default component style for static tags.
  • Always use the blue clickable component style for interactive tags.
  • Always use the checked and unchecked component when the user can make multiple selections.


Last updated on by Diana Thomson