# EquipmentBadge

> A small chip showing one piece of a Digital Worker's desk equipment as an emoji, with or without its label.

## Facts

- **Product**: Crew OS
- **Family**: Agents
- **Global**: `window.DigitalCrew.EquipmentBadge`
- **Source**: `digitalcrew-orchestrator: components/dc/index.ts`
- **Import in the app**: `import { EquipmentBadge } from "@/components/dc";`
- **Live preview**: /design/components/equipment-badge/preview.html
- **Page**: /design/components/equipment-badge

## Guidelines

**Use it for** the equipment row on worker cards in the Crew OS control centre (icons only there) and in room or desk views.

**What you provide**: `type` (required: `screen`, `phone`, `desk`, `whiteboard`, `camera`, `printer`, `coffee`, `couch`, `server`), `color` (optional 6-digit hex, the worker's colour), `showLabel` (default true). Labels and emoji come from `EQUIPMENT_CATALOG`: Monitor 🖥️, Phone 📞, Desk 🪑, Whiteboard 📋, Camera 📷, Printer 🖨️, Coffee Machine ☕, Couch 🛋️, Server Rack 🖧.

**Anatomy**: `inline-flex`, 4px gap, `px-2 py-0.5`, `rounded-md`, 12px medium text, 1px border. With `color` the text takes the colour, the background alpha `10` (about 6%) and the border alpha `30` (about 19%); without it the chip keeps the default border and text colours.

**Behaviour**: static.

**Don't** rely on the emoji alone for meaning when `showLabel` is false (add a tooltip or a visible list elsewhere), or pass non-hex colours.

## API

```ts
interface EquipmentBadgeProps {
    type: EquipmentType;
    color?: string;
    showLabel?: boolean;
}
export declare function EquipmentBadge({ type, color, showLabel }: EquipmentBadgeProps): any;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function tok(name) { return getComputedStyle(document.documentElement).getPropertyValue("--dc-" + name).trim(); }
  var all = ["screen", "phone", "desk", "whiteboard", "camera", "printer", "coffee", "couch", "server"];
  function App() {
    return h("div", { className: "grid gap-3" },
      h("div", { className: "flex flex-wrap gap-1" }, all.map(function (t) { return h(DC.EquipmentBadge, { key: t, type: t, color: tok("andre") }); })),
      h("div", { className: "flex flex-wrap items-center gap-1" },
        h("span", { className: "text-muted-foreground mr-2 text-xs" }, "Sophie's desk, icons only"),
        ["screen", "phone", "desk", "camera"].map(function (t) { return h(DC.EquipmentBadge, { key: t, type: t, color: tok("sophie"), showLabel: false }); })),
      h("div", { className: "flex flex-wrap items-center gap-1" },
        h("span", { className: "text-muted-foreground mr-2 text-xs" }, "No colour"),
        ["whiteboard", "coffee"].map(function (t) { return h(DC.EquipmentBadge, { key: t, type: t }); })));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Agents

- [AgentAvatar](/design/components/agent-avatar.md): A Digital Worker's face as a muted, looping video in a rounded square, framed and glowing in the agent's brand colour, with an optional live dot.
- [AgentSkillTag](/design/components/agent-skill-tag.md): A tiny chip naming one of a Digital Worker's skills, tinted with that worker's colour.
- [AskMaxAction](/design/components/ask-max-action.md): A contextual "Ask Max" button.
- [CrewAgents](/design/components/crew-agents.md): The Digital Crew's eight agents, each one colour broken out of the ink: the palette ramp, the gradient, the role and the skills the public site gives them.
- [MaxRoster](/design/components/max-roster.md): Max's 24 Digital Workers in their seven teams, each with its face (**AgentFace**) and accent dot.
- [OAuthRequestCard](/design/components/oauth-request-card.md): A "Connect HubSpot" or "Connect Notion" card that an agent drops into the chat.
- [ThinkingBox](/design/components/thinking-box.md): Max's thinking box: the running account of what he thought, which tools he called, what he sent and what came back.
- [ToolStatusIndicator](/design/components/tool-status-indicator.md): Compact dot, label and state rows that report tool activity in the onboarding and meetings chats.