# Badge

> A small pill label: count, channel, state or tag (Max's `components/ui/badge.tsx`).

## Facts

- **Product**: Max
- **Family**: Actions
- **Global**: `window.DigitalCrew.Badge`
- **Source**: `max-agent: src/components/ui/badge.tsx`
- **Import in the app**: `import { Badge } from "@/components/ui/badge";`
- **Live preview**: /design/components/badge/preview.html
- **Page**: /design/components/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**](/design/components/status-colors.md) 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.

## API

```ts
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

```html
<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

- [Button](/design/components/button.md): The action control for both products: filled with `primary` by default, in six variants and six sizes (Max's `components/ui/button.tsx`).
- [GlassButton](/design/components/glass-button.md): The Crew OS button with a frosted-glass finish: the same variants, sizes and `asChild` as `Button`, plus a backdrop blur and a soft highlight layer.
- [Toggle](/design/components/toggle.md): A two-state button (Radix toggle) that stays pressed until clicked again.
- [ToggleGroup](/design/components/toggle-group.md): A segmented set of toggles (Radix toggle group) where one or several options are on at a time.