Badge is used to label or highlight items in the interface.

If you need Badge for Contentful entity status, consider using EntityStatusBadge instead.

How to use Badge

  • badges are used to inform users of the status of an element in the interface
  • keep in mind the recommended color coding for each of variant

Component variants

Badge types

  • Primary - used for the entity that has been 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
  • Negative - used for the entity that has been deleted.
  • Warning - used for the entity that has been deleted.
  • Secondary - used for all the secondary elements, for example in the list of versions:
  • Featured - used for featured entities that should be highlighted.

Badge sizes

  • default
  • small

Content guidelines

  • 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.

Props (API reference)

Badge also accepts all HTML attributes (as React properties) that are applicable to the usual div tag.