Badge

Displays a badge or a component that looks like a badge.

Badge

variant

default

secondary

destructive

outline

children

#Installation

bunx --bun barefoot add badge

#Usage

DefaultSecondaryDestructiveOutlineLink Badge

1import { Badge } from "@/components/ui/badge"23function BadgeDemo() {4  return (5    <div className="flex flex-wrap gap-2">6      <Badge>Default</Badge>7      <Badge variant="secondary">Secondary</Badge>8      <Badge variant="destructive">Destructive</Badge>9      <Badge variant="outline">Outline</Badge>10      <Badge asChild>11        <a href="#">Link Badge</a>12      </Badge>13    </div>14  )15}

#Examples

#Secondary

Secondary

<Badge variant="secondary">Secondary</Badge>

#Destructive

Destructive

<Badge variant="destructive">Destructive</Badge>

#Outline

Outline

<Badge variant="outline">Outline</Badge>

#As Child

Clicked 0 times Outline Link

1"use client"23import { createSignal } from '@barefootjs/dom'4import { Badge } from '@/components/ui/badge'56function BadgeAsChild() {7  const [count, setCount] = createSignal(0)89  return (10    <div className="flex items-center gap-4">11      <Badge asChild>12        <a href="#" onClick={() => setCount(count() + 1)}>13          Clicked {count()} times14        </a>15      </Badge>16      <Badge variant="outline" asChild>17        <a href="#">Outline Link</a>18      </Badge>19    </div>20  )21}

#API Reference

Prop	Type	Default	Description
variant	'default' \| 'secondary' \| 'destructive' \| 'outline'	'default'	The visual style of the badge.
asChild	boolean	false	Render child element with badge styling instead of <span>.
children	Child	-	The content of the badge.