A small label for a status or a count.

Active Pending Archived Overdue Completed 3 new messages

Usage

Example.svelte 
<script lang="ts">
	import CheckIcon from "@lucide/svelte/icons/check";

	import { Badge } from "@orochibraru/ui/badge";
</script>

<div class="flex flex-wrap items-center gap-2">
	<Badge>Active</Badge>
	<Badge variant="secondary">Pending</Badge>
	<Badge variant="outline">Archived</Badge>
	<Badge variant="destructive">Overdue</Badge>
	<Badge variant="secondary"
		><CheckIcon data-icon="inline-start" /> Completed</Badge
	>
	<Badge href="#">3 new messages</Badge>
</div>