EntityStatusBadge

Import

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

Examples

EntityStatusBadge can represent different entity statuses. The value is passed as an entityStatus property and displayed as content in the badge:

Published

Hide code
function EntityStatusBadgePublishedExample() {
  return <EntityStatusBadge entityStatus="published" />;
}
function EntityStatusBadgePublishedExample() {
  return <EntityStatusBadge entityStatus="published" />;
}
Open in Playground

Draft

Hide code
function EntityStatusBadgeDraftExample() {
  return <EntityStatusBadge entityStatus="draft" />;
}
function EntityStatusBadgeDraftExample() {
  return <EntityStatusBadge entityStatus="draft" />;
}
Open in Playground

Archived

Hide code
function EntityStatusBadgeArchivedExample() {
  return <EntityStatusBadge entityStatus="archived" />;
}
function EntityStatusBadgeArchivedExample() {
  return <EntityStatusBadge entityStatus="archived" />;
}
Open in Playground

Changed

Hide code
function EntityStatusBadgeChangedExample() {
  return <EntityStatusBadge entityStatus="changed" />;
}
function EntityStatusBadgeChangedExample() {
  return <EntityStatusBadge entityStatus="changed" />;
}
Open in Playground

Deleted

Hide code
function EntityStatusBadgeDeletedExample() {
  return <EntityStatusBadge entityStatus="deleted" />;
}
function EntityStatusBadgeDeletedExample() {
  return <EntityStatusBadge entityStatus="deleted" />;
}
Open in Playground

New

Hide code
function EntityStatusBadgeNewExample() {
  return <EntityStatusBadge entityStatus="new" />;
}
function EntityStatusBadgeNewExample() {
  return <EntityStatusBadge entityStatus="new" />;
}
Open in Playground

With scheduled actions

Some entities have scheduled actions, for instance an entry might be scheduled to be published at a specific time later on:

Hide code
function EntityStatusBadgeScheduledExample() {
  return <EntityStatusBadge entityStatus="changed" isScheduled />;
}
function EntityStatusBadgeScheduledExample() {
  return <EntityStatusBadge entityStatus="changed" isScheduled />;
}
Open in Playground

Props (API reference)

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.