Badge

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

<Badge variant="primary">changed</Badge>
<Badge variant="primary">changed</Badge>
Hide source

• Primary filled - used to highlight a new functionality or to indicate changes in the interface.

<Badge variant="primary-filled">new</Badge>
<Badge variant="primary-filled">new</Badge>
Hide source

• Positive - used for the entity that has been published

<Badge variant="positive">published</Badge>
<Badge variant="positive">published</Badge>
Hide source

• Negative - used for the entity that has been deleted.

<Badge variant="negative">deleted</Badge>
<Badge variant="negative">deleted</Badge>
Hide source

• Warning - used for the entity that has been deleted.

<Badge variant="warning">draft</Badge>
<Badge variant="warning">draft</Badge>
Hide source

• Secondary - used for all the secondary elements, for example in the list of versions:

<Badge variant="secondary">current</Badge>
<Badge variant="secondary">current</Badge>
Hide source

• Featured - used for featured entities that should be highlighted.

<Badge variant="featured">trial</Badge>
<Badge variant="featured">trial</Badge>
Hide source

Badge sizes

• default

<Badge variant="positive">published</Badge>
<Badge variant="positive">published</Badge>
Hide source

• small

<Badge variant="primary-filled" size="small">
  new
</Badge>
<Badge variant="primary-filled" size="small">
  new
</Badge>
Hide source

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

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