Status Badge

The luma badge extended with semantic success and warning variants.

registry:ui Registry JSON

Default Secondary Outline On schedule At risk Delayed

Installation

pnpm dlx shadcn-svelte@latest add https://shadcn.cptckp.com/r/status-badge.json

The CLI copies the source into your project and installs every dependency listed below.

Usage

import { Badge } from '$lib/components/ui/badge/index.js';

example.svelte

svelte

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

<div class="flex flex-wrap items-center justify-center gap-3">
	<Badge>Default</Badge>
	<Badge variant="secondary">Secondary</Badge>
	<Badge variant="outline">Outline</Badge>
	<Badge variant="success">On schedule</Badge>
	<Badge variant="warning">At risk</Badge>
	<Badge variant="destructive">Delayed</Badge>
</div>

Files & dependencies

Installed as	Source
badge/badge-variants.ts	src/lib/registry/ui/badge/badge-variants.ts
badge/badge.svelte	src/lib/registry/ui/badge/badge.svelte
badge/index.ts	src/lib/registry/ui/badge/index.ts

npm dependencies

None.

Registry dependencies

status-colors