Display

Badge

A short label for status or category.

Installation

npx sinaui add badge

Copy src/lib/ui/Badge.svelte and tokens.css. No dependencies.

Examples

Neutral

The default, for plain facts. Each tone carries its icon, as Alert does, so the meaning never rests on color alone.

Cataloged

<script lang="ts">
	import Badge from '#lib/ui/Badge.svelte';
</script>

<Badge>Cataloged</Badge>

Accent

For something new or good.

Recently copied

<script lang="ts">
	import Badge from '#lib/ui/Badge.svelte';
</script>

<Badge tone="accent">Recently copied</Badge>

Warning

For something that needs attention soon.

On loan

<script lang="ts">
	import Badge from '#lib/ui/Badge.svelte';
</script>

<Badge tone="warning">On loan</Badge>

Danger

For something wrong or missing.

Missing

<script lang="ts">
	import Badge from '#lib/ui/Badge.svelte';
</script>

<Badge tone="danger">Missing</Badge>

Your own icon

Any Hugeicons icon in place of the tone's.

In the reading room

<script lang="ts">
	import { BookOpen01Icon } from '@hugeicons/core-free-icons';
	import Badge from '#lib/ui/Badge.svelte';
</script>

<Badge tone="accent" icon={BookOpen01Icon}>In the reading room</Badge>

No icon

Pass false as the icon to show the label alone.

On loan

<script lang="ts">
	import Badge from '#lib/ui/Badge.svelte';
</script>

<Badge tone="warning" icon={false}>On loan</Badge>

With a status dot

For live status; replaces the icon.

Reading room open

<script lang="ts">
	import Badge from '#lib/ui/Badge.svelte';
</script>

<Badge tone="accent" dot>Reading room open</Badge>

Props

Prop	Type	Default
`tone`	`'neutral' \| 'accent' \| 'warning' \| 'danger'`	`'neutral'`
`icon`	`boolean \| IconNode`	`true`
`dot`	`boolean`	`false`

Accessibility

Plain text in a <span>: the words carry the meaning, never the color alone.
Every tone keeps at least 4.5:1 text contrast on its tint, and its icon at least 3:1, in light and dark.
The icon is decorative (hidden from screen readers): the words already say it.