This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Badge

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

Table of contents

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

EntityStatusBadge

For easy and quick usage of Badge in Contentful products, in extensions and apps we provide additional component called EntityStatusBadge. It's used in the Contentful entity to mark their status.

EntityStatusBadge can have different mark following statuses. Those values are passed as a entityStatus property and displayed as a content in the badge:

  • published
  • draft
  • archived
  • changed
  • deleted
  • 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.

Props

NameRequiredDefaultTypeDescription
sizedefault
"small"
"default"
Sets the size of the component
variantprimaryBadgeVariantDetermines the variation of the component
childrenrequiredReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes

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