For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
1
Sponsor

Badge

PreviousNext

Compact status labels with solid and dot appearances.

Preview

amberbluecyanemeraldfuchsiagraygreenindigolimeorangepinkpurpleredrosetealvioletyellow
amberbluecyanemeraldfuchsiagraygreenindigolimeorangepinkpurpleredrosetealvioletyellow
CompletePending

Installation

$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/badge.json

Usage

import { Badge } from "@/components/ui/badge";
 
<Badge variant="dot" color="green">
  Ready
</Badge>;

API Reference

variant: solid or dot. Existing default, secondary, outline and destructive variants remain available. color: the demonstrated Tailwind color names. size: default or compact (inherited when omitted). icon: an SVG component. Shape follows ShapeProvider.