{
  "name": "badge",
  "title": "Badge",
  "description": "A status light in text form: tinted chips, optional leading dot, glow for the one badge that must be seen.",
  "category": "data-display",
  "install": {
    "command": "npx shadcn@latest add @clow/badge",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "variant": {
      "type": "select",
      "options": [
        "default",
        "outline",
        "success",
        "warning",
        "destructive",
        "glow"
      ],
      "default": "default",
      "description": "Semantic tint. Use glow for at most one live badge per view."
    },
    "dot": {
      "type": "boolean",
      "default": false,
      "description": "Leading 2.5px status bead tinted by variant."
    },
    "children": {
      "type": "text",
      "default": "Relay online"
    }
  },
  "agent": {
    "prompt": "Use Badge for statuses, counts and tags. success/warning/destructive map to semantic state; glow marks the single live badge in a view (uses accent, not primary ink); destructive never glows. Pass dot for a leading status bead. An iconsax icon can be a direct child before the text · never pass size or color props to the icon.",
    "examples": [
      "<Badge variant=\"success\">Signal locked</Badge>",
      "<Badge variant=\"glow\" dot>Live</Badge>",
      "<Badge variant=\"success\"><TickCircle />Signal locked</Badge>"
    ]
  },
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/badge",
    "markdown": "https://clow.cards/llms/badge.md",
    "registryItem": "https://clow.cards/r/badge.json"
  }
}
prop	type	default
variant	default \| outline \| success \| warning \| destructive \| glow	default
dot	boolean	false
children	text	Relay online
Draw

Playground

Examples

Props
