Badge
Badge
---import { Badge } from "@/components/starwind/badge";---
<Badge>Badge</Badge>Installation
pnpx starwind@latest add badgenpx starwind@latest add badgeyarn dlx starwind@latest add badgeLink
The Badge component can also function as a link (<a> tag) by providing an href prop.
Usage
variant
default
primary
secondary
outline
ghost
info
success
warning
error
---import { Badge } from "@/components/starwind/badge";---
<Badge variant="default">default</Badge><Badge variant="primary">primary</Badge><Badge variant="secondary">secondary</Badge><Badge variant="outline">outline</Badge><Badge variant="ghost">ghost</Badge><Badge variant="info">info</Badge><Badge variant="success">success</Badge><Badge variant="warning">warning</Badge><Badge variant="error">error</Badge>size
small
medium
large
---import { Badge } from "@/components/starwind/badge";---
<Badge size="sm">small</Badge><Badge size="md">medium</Badge><Badge size="lg">large</Badge>API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "primary" | "secondary" | "outline" | "ghost" | "info" | "success" | "warning" | "error" | "default" |
size | "sm" | "md" | "lg" | "md" |
The component also accepts all standard HTML attributes for both <div> and <a> elements.
Changelog
v1.1.0
tailwind-variantsnow implemented. This usestailwind-mergeunder the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.