Badge

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/badge.json

Both need Tailwind CSS v4; see Installation for the setup.

NewPre-orderHandmadeIn stockOnly 2 leftSold out

export default function BadgeVariants() {
  return (
    <>
      <Badge>New</Badge>
      <Badge variant="secondary">Pre-order</Badge>
      <Badge variant="outline">Handmade</Badge>
      <Badge variant="success">In stock</Badge>
      <Badge variant="warning">Only 2 left</Badge>
      <Badge variant="destructive">Sold out</Badge>
    </>
  );
}

The text always carries the meaning (“Sold out”); colour only reinforces it, so the badge still works for colour-blind visitors and in monochrome.

Prop	Type	Default
variant	'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning'	'default'

The first four are shadcn/ui’s Badge variants; success and warning follow the same pattern. Classes: badgeVariants({ variant }), so a link can look like a badge. State: data-variant.