Badge

Inline labels for categorization, tagging, and interactive filter pills. Supports multiple variants for different use cases.

Variants

DefaultOutlineFilterFilter ActiveSuccessWarning

tsx

<Badge variant="default">Default</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="filter">Filter</Badge>
<Badge variant="filterActive">Filter Active</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>

With icon

+30% conversionOpen to new roles View work

Pass any Lucide icon via icon (left) or iconRight (right) — or both. Available on every variant. The second example also passes href, which works on any badge to render it as a Next.js Link with a hover-opacity effect.

tsx

<Badge variant="outline" icon={TrendingUp}>+30% conversion</Badge>
<Badge
  variant="outline"
  icon={Briefcase}
  iconRight={ArrowRight}
  href="/about"
>
  Open to new roles
</Badge>
<Badge variant="outline" iconRight={ArrowRight} href="/work">
  View work
</Badge>

Sizes

SmallDefaultLargeExtra Large

tsx

<Badge size="sm">Small</Badge>
<Badge size="default">Default</Badge>
<Badge size="lg">Large</Badge>
<Badge size="xl">Extra Large</Badge>

Interactive Filter Pills

AllDesignDevelopmentStrategy

Click the badges above to see the interactive filter behavior.

tsx

const [activeFilter, setActiveFilter] = useState('All')

{filters.map((filter) => (
  <Badge
    key={filter}
    variant={activeFilter === filter ? 'filterActive' : 'filter'}
    size="lg"
    onClick={() => setActiveFilter(filter)}
  >
    {filter}
  </Badge>
))}

Use Cases

Category Tags

DesignUI/UXBranding

Status Indicators

FeaturedNew

Blog Post Tags

ReactTypeScriptNext.js

Props

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "filter" \| "filterActive" \| "success" \| "warning"`	`"outline"`	Visual style of the badge
`size`	`"default" \| "sm" \| "lg" \| "xl"`	`"default"`	Size of the badge
`href`	`string`	-	Available on any variant. When provided, the badge renders as a Next.js Link with a subtle hover-opacity effect instead of a <span>.
`icon`	`LucideIcon`	-	Optional Lucide icon rendered before the badge content with consistent spacing.
`iconRight`	`LucideIcon`	-	Optional Lucide icon rendered after the badge content. Combine with `icon` for icons on both sides.
`children`*	`ReactNode`	-	Badge content

Import

tsx

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