Data display

CampaignStatusBadge

The campaign lifecycle pill: Draft, Active, Paused, Stopped, Completed, Archived.

Usage#

Use it for campaign lists, headers and pickers.

What you provide: status (draft | active | paused | stopped | completed | archived). Mapping: draft secondary; active a green-600 fill; paused an outline in yellow; stopped destructive; completed a blue-600 fill; archived secondary at 60%. Analytics tables use the tinted pills on StatusColors instead.

Facts#

ProductMax

FamilyData display

Globalwindow.DigitalCrew.CampaignStatusBadge

Sourcemax-agent: src/features/campaigns/ui/components/campaign-status-badge.tsx

Import in the appimport { CampaignStatusBadge } from "@/features/campaigns/ui/components/campaign-status-badge";

API#

TypeScript declarations emitted from src/features/campaigns/ui/components/campaign-status-badge.tsx.

interface CampaignStatusBadgeProps {
    status: CampaignStatus;
}
export declare function CampaignStatusBadge({ status }: CampaignStatusBadgeProps): JSX.Element;

Code#

The preview above, as plain React.createElement against window.DigitalCrew with realistic data. Copy it into a page that loads the bundle.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "flex flex-wrap items-center gap-2" }, ["draft", "active", "paused", "stopped", "completed", "archived"].map(function (s) {
    return h(DC.CampaignStatusBadge, { key: s, status: s });
  }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>