About
A small pill-shaped label with an optional colored dot for showing a record's status (e.g. paid, pending, failed) in tables and headers.
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 StatusBadge from "@/components/ui/status-badge";
export default function StatusBadgePaidDemo() {
return (
<div
className="flex min-h-[200px] w-full items-center justify-center bg-[var(--fp-color-bg)] p-10"
style={{ color: "var(--fp-color-text)" }}
>
<StatusBadge tone="success">Paid</StatusBadge>
</div>
);
}
More by sudharshanpanidev
View all
Button
Select
Empty State
Stepper
Checkbox