About
A small uppercase status label with neutral, accent, success, and danger tones for marking states like draft, new, live, or failed.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Status Badge to your project and fits it to your theme.
Code
How Status Badge is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Badge } from "@/components/ui/badge";
export default function BadgeDemo() {
return (
<div className="flex items-center gap-2">
<Badge>Draft</Badge>
<Badge tone="accent">New</Badge>
<Badge tone="success">Live</Badge>
<Badge tone="danger">Failed</Badge>
</div>
);
}
Dependencies
More by jdavisson87
View all
Text Field
Switch