Badge

---
import { Badge } from "@/components/starwind/badge";
---

<Badge>Badge</Badge>

Installation

pnpx starwind@latest add badge

npx starwind@latest add badge

yarn dlx starwind@latest add badge

Link

The Badge component can also function as a link (<a> tag) by providing an href prop.

---
import { Badge } from "@/components/starwind/badge";
---

<Badge href="#link">Badge</Badge>

Usage

variant

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

---
import { Badge } from "@/components/starwind/badge";
---

<Badge size="sm">small</Badge>
<Badge size="md">medium</Badge>
<Badge size="lg">large</Badge>

API Reference

Badge

A versatile badge component with multiple variants and sizes.

<Badge variant="default" size="md">Badge</Badge>

Additional Notes:

• href: When provided, renders the badge as a link (<a> tag) instead of a <div>

Changelog

v1.3.0

• style and focus state updates

v1.2.0

• Add a data-slot attribute to all components to enable global styling updates

v1.1.1

• Adjust component to use type VariantProps from tailwind-variants. This provides greater type safety and cleans up component frontmatter.

v1.1.0

• tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.