Interfaces Badge

Component

About

Rounded pill badge component from Interfaces DS with default, secondary, destructive, and outline variants.

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

Code

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

Usage.tsx

import { Badge } from "@/components/ui/interfaces-badge"

export default function SecondaryBadgeDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8 overflow-hidden">
      <Badge variant="secondary">Secondary</Badge>
    </div>
  )
}