Badge

Guidelines#

Variants: default (primary fill), secondary, outline, destructive (dark themes at 60%). 12px medium, r-full, 2px × 8px padding, 12px icons. With asChild it wraps a link and gains a hover.

Status pills are outline Badges with the tinted template border-{c}-500/30 bg-{c}-500/10 text-{c}-700 dark:text-{c}-300 (neutral states: border-border bg-muted text-muted-foreground). The mapping per domain is on the StatusColors card; reuse it rather than inventing a colour.

What you provide: one or two words in sentence case ("In progress", "3 runs"). A colour never carries the meaning alone: the word does.

Don't make a badge the only click target of a row, or stack more than three on one line.

Facts#

Group	Actions
Product	Max
Global	window.DigitalCrew.Badge
Source	max-agent: src/components/ui/badge.tsx
Import in the app	import { Badge } from "@/components/ui/badge";

API#

TypeScript declarations emitted from src/components/ui/badge.tsx (the module also exports its other parts).

declare const badgeVariants: (props?: {
    variant?: "default" | "destructive" | "outline" | "secondary";
} & ClassProp) => string;
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
    asChild?: boolean;
}): any;
export { Badge, badgeVariants };

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 Pill(c, text) {
  return h(DC.Badge, { variant: "outline", className: c }, text);
}
function App() {
  return h("div", { className: "flex flex-col gap-4" },
    h("div", { className: "flex flex-wrap items-center gap-2" },
      h(DC.Badge, null, "New"),
      h(DC.Badge, { variant: "secondary" }, "3 runs"),
      h(DC.Badge, { variant: "outline" }, h(I.Linkedin), "LinkedIn"),
      h(DC.Badge, { variant: "destructive" }, "Bounced")),
    h("div", { className: "flex flex-wrap items-center gap-2" },
      Pill("border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-300", "Suggested"),
      Pill("border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300", "To do"),
      Pill("border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300", "In progress"),
      Pill("border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300", "Done"),
      Pill("border-border bg-muted text-muted-foreground", "Cancelled")));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Actions#