Forma 36

Tag

StorybookGithub
stable

Tags are used to label or highlight items in the interface.

Table of contents

How to use Tag

  • tags are used to inform users of the status of an element in the interface
  • keep in mind the recommended color coding for each of tagType
  • there is a small size of Tag available. This might be used in denser areas of content

Component variations

Tag types

  • Primary - used for the entity that has been changed, it maps to entityStatusType changed
  • Primary filled - used to highlight a new functionality or to indicate changes in the interface.
  • Positive - used for the entity that has been published, it maps to entityStatusType published
  • Negative - used for the entity that has been deleted, it maps to entityStatusType deleted.
  • Warning - used for the entity that has been deleted, it maps to entityStatusType deleted.
  • Secondary - used for all the secondary elements, for example in the list of versions:
  • Featured - used for featured entities that should be highlighted.
  • Muted - this tagType is deprecated, please use tagType secondary instead

Tag sizes

  • default
  • small

Content recommendations

  • try to use labels with short, scannable text
  • try to use a single word to describe the status of an element
  • try to describe the status in the past tense, like changed or archived

Accessibility

  • text must be clear enough for color-blind users to be able to understand immediately without needing to rely only on the color.