Comparación entre la versión Astro (Saastro) y React (shadcn/ui)
🚀 saastro/ui (Astro)
Badge
⚛️ shadcn/ui (React)
Installation
Usage
---
import { Badge } from "@/components/ui-saastro/badge"
---
<Badge>Badge</Badge>Examples
Default
<Badge>Default</Badge>Secondary
<Badge variant="secondary">Secondary</Badge>Destructive
<Badge variant="destructive">Destructive</Badge>Outline
<Badge variant="outline">Outline</Badge>As Link
Use an anchor tag for clickable badges.
<a href="/docs">
<Badge>Documentation</Badge>
</a>With Icon
---
import { Badge } from "@/components/ui-saastro/badge"
---
<Badge>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
Premium
</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "default" | The visual style of the badge |
class | string | - | Additional CSS classes |
Accessibility
- Badges are decorative by default and use
<span>element - When used as links, ensure the parent
<a>has proper focus states - Consider adding
aria-labelfor icon-only badges