Badge

Component

About

Status badge in seven tones with an optional dot. Every tone keeps 4.5:1 on its own tint in light and dark. Part of the Layro System: layro.vercel.app.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Badge to your project and fits it to your theme.

Code

How Badge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { Badge } from "@/components/ui/layro-badge";

/* Status labels in seven tones. Every tone clears 4.5:1 on its own tint,
   in light and dark, with an optional dot for scanning a column. */

export default function BadgeDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 440 }}>
        <h2 className="text-[16px] font-semibold tracking-[-0.01em]">Status badges</h2>
        <div className="mb-5" />
        <div className="flex flex-wrap gap-2">
          <Badge>Draft</Badge>
          <Badge tone="primary">Owner</Badge>
          <Badge tone="outline">v2.4</Badge>
          <Badge tone="info">Beta</Badge>
          <Badge size="sm">12</Badge>
        </div>
        <div className="mt-4 grid gap-2 border-t border-border pt-4 text-[13px]">
          {[["INV-2026-0914", "success", "Paid"], ["INV-2026-0927", "warning", "Pending"], ["INV-2026-0901", "destructive", "Failed"]].map(([n, t, l]) => (
            <div key={n} className="flex items-center justify-between">
              <span className="tabular-nums">{n}</span>
              <Badge tone={t as "success"} dot>{l}</Badge>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}