Badge

Import

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

Examples

Primary

Used for the entity that has been changed

Hide code
function PrimaryBadgeExample() {
  return <Badge variant="primary">Changed</Badge>;
}
function PrimaryBadgeExample() {
  return <Badge variant="primary">Changed</Badge>;
}
Open in Playground

Primary filled

Used to highlight a new functionality or to indicate changes in the interface.

Hide code
function PrimaryFilledBadgeExample() {
  return <Badge variant="primary-filled">New</Badge>;
}
function PrimaryFilledBadgeExample() {
  return <Badge variant="primary-filled">New</Badge>;
}
Open in Playground

Positive

Used for the entity that has been published

Hide code
function PositiveBadgeExample() {
  return <Badge variant="positive">Published</Badge>;
}
function PositiveBadgeExample() {
  return <Badge variant="positive">Published</Badge>;
}
Open in Playground

Negative

Used for the entity that has been deleted.

Hide code
function NegativeBadgeExample() {
  return <Badge variant="negative">Deleted</Badge>;
}
function NegativeBadgeExample() {
  return <Badge variant="negative">Deleted</Badge>;
}
Open in Playground

Warning

Used for the entity that has been deleted.

Hide code
function WarningBadgeExample() {
  return <Badge variant="warning">Draft</Badge>;
}
function WarningBadgeExample() {
  return <Badge variant="warning">Draft</Badge>;
}
Open in Playground

Secondary

Used for all the secondary elements, for example in the list of versions:

Hide code
function SecondaryBadgeExample() {
  return <Badge variant="secondary">Current</Badge>;
}
function SecondaryBadgeExample() {
  return <Badge variant="secondary">Current</Badge>;
}
Open in Playground

Featured

Used for featured entities that should be highlighted.

Hide code
function FeaturedBadgeExample() {
  return <Badge variant="featured">Trial</Badge>;
}
function FeaturedBadgeExample() {
  return <Badge variant="featured">Trial</Badge>;
}
Open in Playground

Badge sizes

Default

Hide code
function DefaultSizeExample() {
  return <Badge variant="positive">Published</Badge>;
}
function DefaultSizeExample() {
  return <Badge variant="positive">Published</Badge>;
}
Open in Playground

Small

Hide code
function SmallSizeExample() {
  return (
    <Badge variant="primary-filled" size="small">
      New
    </Badge>
  );
}
function SmallSizeExample() {
  return (
    <Badge variant="primary-filled" size="small">
      New
    </Badge>
  );
}
Open in Playground

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.

Hide code
function StartIconExample() {
  return (
    <Stack>
      <Badge startIcon={<EnvironmentAliasIcon />}>Main</Badge>
      <Badge endIcon={<ClockIcon />}>Scheduled</Badge>
    </Stack>
  );
}
function StartIconExample() {
  return (
    <Stack>
      <Badge startIcon={<EnvironmentAliasIcon />}>Main</Badge>
      <Badge endIcon={<ClockIcon />}>Scheduled</Badge>
    </Stack>
  );
}
Open in Playground

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.