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

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

Draft

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

Archived

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

Changed

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

Deleted

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

New

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:

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

Props (API reference)