Docs·Badge

Badge

Compact label chip with eighteen color presets and utility variants. Built on Base UI.

Installation

$pnpm dlx shadcn@latest add @spiderui/badge

Depends on @base-ui/react and class-variance-authority. Manual install: pnpm add @base-ui/react class-variance-authority

Usage

API Reference

PropTypeDefault
variantVisual style — secondary, destructive, outline, ghost, link, or a named color (red, blue, green, …).
variant union"default"
classNameAdditional class names merged onto the badge element.
string—
renderCustom render prop from Base UI — render as any element via useRender.
useRender.RenderProp<"span">—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
RedBlueGreenYellowPurplePinkOrangeCyanIndigoVioletRoseAmberLimeEmeraldSkySlateFuchsia
import { Badge } from "@/components/ui/badge"
export default function Page() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="red">Red</Badge>
      <Badge variant="blue">Blue</Badge>
      <Badge variant="green">Green</Badge>
      <Badge variant="yellow">Yellow</Badge>
      <Badge variant="purple">Purple</Badge>
      <Badge variant="pink">Pink</Badge>
      <Badge variant="orange">Orange</Badge>
      <Badge variant="cyan">Cyan</Badge>
      <Badge variant="indigo">Indigo</Badge>
      <Badge variant="violet">Violet</Badge>
      <Badge variant="rose">Rose</Badge>
      <Badge variant="amber">Amber</Badge>
      <Badge variant="lime">Lime</Badge>
      <Badge variant="emerald">Emerald</Badge>
      <Badge variant="sky">Sky</Badge>
      <Badge variant="slate">Slate</Badge>
      <Badge variant="fuchsia">Fuchsia</Badge>
    </div>
  )
}