Components / Agent Badge

Agent Badge

The mono uppercase chip that attributes work to an agent or area: task rows, chat attributions, deliverable cards. The color is the area accent, so a glance says which agent acted.

import { AgentBadge } from '@layers/ui/agent-badge'

Rendered stock

House rules

• color takes a raw CSS color; use the canonical area accents (the pastel palette), never an invented hex.
• The default variant draws a full-color border over an 18% wash with foreground text; variant="solid" fills with the color and white text for stronger emphasis.
• dot swaps the chip for a colored dot plus a muted mono label, the quiet inline attribution for list rows and timestamps.
• Labels render mono uppercase by the component; keep them short (mono belongs on all-caps text only).
• size="sm" is the chip row size inside ListRow; md everywhere else.