Design
llms.txt digitalcrew.tech

Data display

CampaignStatusBadge

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

MaxData displayDigitalCrew.CampaignStatusBadge
CampaignStatusBadge · liveOpen

Guidelines#

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#

GroupData display
ProductMax
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;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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>
AgentFaceAnimateDigitsAvatarChannelBadgeEmailVerificationBadgeHeroMetricKpiCardMaxIconSetMetricTileProspectAvatarSnippetTimeLensWorldGlobe