Introduction
Accordion
Badge
Button
Card
Checkbox
Counter
Dialog
Dropdown
Input
Select
Switch
Tabs
Toast
Tooltip
Controlled Input
Field Arrays
Submit
Validation

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

Badge
1<Badge>Badge</Badge>

#Installation

1bunx barefoot add badge

#Usage

1import { Badge } from '@/components/ui/badge'23export default function Page() {4  return <Badge>Badge</Badge>5}

#Examples

#Variants

DefaultSecondaryDestructiveOutline
1<Badge variant="default">Default</Badge>2<Badge variant="secondary">Secondary</Badge>3<Badge variant="destructive">Destructive</Badge>4<Badge variant="outline">Outline</Badge>

#API Reference

PropTypeDefaultDescription
variant'default' | 'secondary' | 'destructive' | 'outline''default'The visual style of the badge.
childrenReactNode-The content of the badge.