Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/badge.jsonUsage
<script lang="ts">
import { Badge } from "$lib/components/ui/badge/index.js";
</script>
<Badge>Badge</Badge>Link
Use the as prop to render another element with the badge styles. Here is a link that looks like a badge.
<script lang="ts">
import { Badge } from "$lib/components/ui/badge/index.js";
</script>
<Badge as="a" href="/pricing">New</Badge>API Reference
Badge
A badge component with variant and size options. Native attributes for the selected element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" \| "destructive" \| "error" \| "info" \| "outline" \| "secondary" \| "success" \| "warning" | "default" | Controls the badge styling and color scheme |
size | "default" \| "sm" \| "lg" | "default" | Controls the badge size |
as | keyof SvelteHTMLElements | "span" | Selects the rendered HTML element |