Badge

A badge component with semantic and full-spectrum color variants built on Base UI.

DefaultSecondaryDestructiveOutlineGhostRedBlueGreenYellowPurplePinkOrangeCyanIndigoVioletRoseAmberLimeEmeraldSkySlateFuchsia

Installation

Usage

import { Badge } from '@/components/ui/badge';

export default function Page() {
  return <Badge variant="blue">New</Badge>;
}

Variants

Semantic

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>
<Badge variant="link">Link</Badge>

Colors

<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>

API Reference

Badge

Prop	Type	Default
`variant?`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link" \| "red" \| "blue" \| "green" \| "yellow" \| "purple" \| "pink" \| "orange" \| "cyan" \| "indigo" \| "violet" \| "rose" \| "amber" \| "lime" \| "emerald" \| "sky" \| "slate" \| "fuchsia"`	`"default"`
`className?`	`string`	-
`render?`	`useRender.RenderProp<"span">`	-

Badge

Installation

Usage

Variants

Semantic

Colors

API Reference

Badge

On this page