Hybrid Astro UI

Badge

Open in ChatGPT

A lightweight, versatile badge component that provides clear labeling, supports multiple variants, and integrates seamlessly with icons or interactive UI elements.

default
secondary
outline
destructive
User

Install

pnpm dlx hybrid-astro-ui@latest add badge
npx hybrid-astro-ui@latest add badge
yarn dlx hybrid-astro-ui@latest add badge
bunx hybrid-astro-ui@latest add badge
---
import { Badge } from "@/src/components/hybrid-astro-ui/badge"
---
<div>
    <Badge>default</Badge>
    <Badge variant="secondary">secondary</Badge>
    <Badge variant="outline">outline</Badge>
    <Badge variant="destructive">destructive</Badge>
    <Badge variant="secondary">
        <User />
        <span>User</span>
    </Badge>
    <Badge class="rounded-full h-9 w-9 p-0" variant="destructive">
        <Trash />
    </Badge>
</div>