Badge
A small label for status, counts, or categories.
Loading preview…
1<script lang="ts">
2 import { Badge } from "./index.js";
3</script>
4
5<div class="flex flex-wrap items-center gap-2">
6 <Badge>Default</Badge>
7 <Badge variant="secondary">Secondary</Badge>
8 <Badge variant="outline">Outline</Badge>
9</div>
10Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/badge/badge.svelte
- ~/components/badge/badge.variants.ts
- ~/components/badge/index.ts
Usage
This site uses Badge to label each item’s registry type on its doc page.
1<script lang="ts">
2 import { Badge } from "~/components/badge";
3</script>
4
5<Badge>Default</Badge>
6<Badge variant="secondary">Secondary</Badge>
7<Badge variant="outline">Outline</Badge>