Badge

Label or highlight items.

For Contentful entity statuses, use EntityStatusBadge instead.

Import

import { Badge } from '@contentful/f36-components';
// or
import { Badge } from '@contentful/f36-badge';

Examples

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:

Used for featured entities that should be highlighted.

Badge sizes

Default

Small

Icons

You can add an icon by providing the following props:

  • startIcon – adds icon to the left side of the badge
  • endIcon – adds icon to the right side of the badge

NOTE: Small badges do not have icons – only the default size.

Props (API reference)

Open in Storybook

Name

Type

Default

children
required
ReactNode

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

endIcon
ReactElement<any, string | JSXElementConstructor<any>>

Expects any of the icon components. Renders the icon aligned to the end

size
"small"
"default"

Sets the size of the component

default default
startIcon
ReactElement<any, string | JSXElementConstructor<any>>

Expects any of the icon components. Renders the icon aligned to the start

testId
string

A [data-test-id] attribute used for testing purposes

variant
"negative"
"positive"
"primary"
"secondary"
"warning"
"primary-filled"
"featured"

Determines the variation of the component

primary

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

Content guidelines

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