Badge
A small pill for labels, counts, and statuses.
<script lang="ts">
import { Badge } from "$lib/components/ui/badge";
</script>
<div class="flex flex-wrap items-center gap-3">
<Badge>Default</Badge>
<Badge>New</Badge>
<Badge href="https://github.com/levish0/lily-svelte">Link</Badge>
</div>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the badge source from the registry into $lib/components/ui/badge.
Usage
<script lang="ts">
import { Badge } from '$lib/components/ui/badge';
</script>
<Badge>New</Badge>Link
Pass an href to render the badge as an anchor with a subtle hover treatment.
<Badge href="/changelog">v1.0</Badge>