New colors
Updated color system with new tokens.Migration notes
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
NameContent TypeAuthorUpdatedStatus
My entry titleBlog postJane RoeOct 29, 2020
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
NameContent TypeAuthorUpdatedStatus
My entry titleBlog postJane RoeOct 29, 2020
published
  • Negative - used for the entity that has been deleted, it maps to entityStatusType deleted.
NameContent TypeAuthorUpdatedStatus
My entry titleBlog postJane RoeOct 29, 2020
deleted
  • Warning - used for the entity that has been deleted, it maps to entityStatusType deleted.
NameContent TypeAuthorUpdatedStatus
My entry titleBlog postJane RoeOct 29, 2020
draft
  • Secondary - used for all the secondary elements, for example in the list of versions:
current
published
  • Featured - used for featured entities that should be highlighted.
SpaceUpdatedStatus
My spaceOct 29, 2020
trial
  • Muted - this tagType is deprecated, please use tagType secondary instead

Tag sizes

  • default
published
  • small
new

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.