Badge

A dumb badge component.

Props

A Badge component has the following properties:

Name	Required	Description
`class`	no	Additional classes.

Snippets

Name	Required	Description
`children`	yes	What the button will display.
`icon`	no	Snippet to add an icon.

Examples

This is a plain badge:

Plain Badge

<script lang="ts">
	import { Badge } from '$lib/components/index.js';
</script>

<Badge>Plain Badge</Badge>

If you want to link the badge, you need to wrap it with an anchor and adjust the styles:

Linked Badge

<script lang="ts">
	import { Badge } from '$lib/components/index.js';
</script>

<a href="/components/badge" class="no-underline">
	<Badge class="preset-filled-primary-50-950">Linked Badge</Badge>
</a>

If you want to add an icon to the badge, you can do so with an icon snippet:

Icon Badge

<script lang="ts">
	import { CircleCheckBig } from '@lucide/svelte';
	import { Badge } from '$lib/components/index.js';
</script>

<Badge class="preset-filled-primary-100-900">
	{#snippet icon()}
		<CircleCheckBig />
	{/snippet}
	Icon Badge
</Badge>

You can make the icon clickable:

Clickable Icon Badge

<script lang="ts">
	import { CircleX } from '@lucide/svelte';
	import { Badge } from '$lib/components/index.js';
</script>

<Badge class="preset-filled-primary-200-800">
	{#snippet icon()}
		<button
			type="button"
			aria-label="Remove badge"
			class="-mr-1 rounded-full p-0.5 hover:preset-filled-primary-300-700"
			onclick={() => alert('You clicked the badge!')}
		>
			<CircleX class="size-[1em]" />
		</button>
	{/snippet}
	Clickable Icon Badge
</Badge>