<SYSTEM>This is the llms.txt documentation for the "badges" directory of the Origin UI - Svelte project.</SYSTEM>

# "badges" directory

> A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications.

This documentation covers 13 components, each following best practices for accessibility, performance, and type safety.

## Components


## badge-01

> A type-safe, accessible badge-01 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-01`
- **Location**: `/src/lib/components/badges/badge-01.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';
</script>

<Badge>Badge</Badge>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-01.svelte)


## badge-02

> A type-safe, accessible badge-02 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-02`
- **Location**: `/src/lib/components/badges/badge-02.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';
</script>

<Badge class="rounded">Badge</Badge>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-02.svelte)


## badge-03

> A type-safe, accessible badge-03 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-03`
- **Location**: `/src/lib/components/badges/badge-03.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`lucide-svelte`](https://github.com/lucide-icons/lucide)

Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';

	import Zap from 'lucide-svelte/icons/zap';
</script>

<Badge class="gap-1">
	<Zap class="-ms-0.5 opacity-60" size={12} stroke-width={2} aria-hidden="true" />
	Badge
</Badge>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-03.svelte)


## badge-04

> A type-safe, accessible badge-04 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-04`
- **Location**: `/src/lib/components/badges/badge-04.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';
</script>

<Badge class="min-w-5 px-1">6</Badge>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-04.svelte)


## badge-05

> A type-safe, accessible badge-05 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-05`
- **Location**: `/src/lib/components/badges/badge-05.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import { badgeVariants } from '$lib/components/ui/badge.svelte';

	import { cn } from '$lib/utils';
</script>

<a href="#title" class={cn(badgeVariants({ variant: 'default' }), 'hover:bg-primary/80')}> Link </a>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-05.svelte)


## badge-06

> A type-safe, accessible badge-06 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-06`
- **Location**: `/src/lib/components/badges/badge-06.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';
</script>

<Badge class="items-baseline gap-1.5">
	Badge
	<span class="text-[0.625rem] font-medium text-primary-foreground/60">73</span>
</Badge>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-06.svelte)


## badge-07

> A type-safe, accessible badge-07 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-07`
- **Location**: `/src/lib/components/badges/badge-07.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`lucide-svelte`](https://github.com/lucide-icons/lucide)

Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';

	import Check from 'lucide-svelte/icons/check';
</script>

<Badge variant="outline" class="gap-1.5">
	<Check class="text-emerald-500" size={12} stroke-width={2} aria-hidden="true" />
	Badge
</Badge>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-07.svelte)


## badge-08

> A type-safe, accessible badge-08 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-08`
- **Location**: `/src/lib/components/badges/badge-08.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';
</script>

<Badge variant="outline" class="gap-1.5">
	<span class="size-1.5 rounded-full bg-emerald-500" aria-hidden="true"></span>
	Badge
</Badge>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-08.svelte)


## badge-09

> A type-safe, accessible badge-09 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-09`
- **Location**: `/src/lib/components/badges/badge-09.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';
</script>

<Badge variant="outline" class="gap-1.5">
	<span class="size-1.5 rounded-full bg-amber-500" aria-hidden="true"></span>
	Badge
</Badge>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-09.svelte)


## badge-10

> A type-safe, accessible badge-10 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-10`
- **Location**: `/src/lib/components/badges/badge-10.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';
</script>

<Badge variant="outline" class="gap-1.5">
	<span class="size-1.5 rounded-full bg-red-500" aria-hidden="true"></span>

	Badge
</Badge>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-10.svelte)


## badge-11

> A type-safe, accessible badge-11 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-11`
- **Location**: `/src/lib/components/badges/badge-11.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`lucide-svelte`](https://github.com/lucide-icons/lucide)

Full component implementation:

```svelte
<script lang="ts">
	import { badgeVariants } from '$lib/components/ui/badge.svelte';
	import Checkbox from '$lib/components/ui/checkbox.svelte';

	import { cn } from '$lib/utils';
	import Check from 'lucide-svelte/icons/check';
</script>

<label
	class={cn(
		badgeVariants({ variant: 'default' }),
		'cursor-pointer hover:bg-primary/80 has-[[data-state=unchecked]]:bg-muted has-[[data-state=unchecked]]:text-muted-foreground has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-ring/70'
	)}
>
	<div class="flex items-center gap-1">
		<Checkbox id="badge-selectable" class="peer sr-only after:absolute after:inset-0" checked />
		<Check
			size={12}
			strokeWidth={2}
			class="hidden peer-data-[state=checked]:block"
			aria-hidden="true"
		/>
		<span class="select-none">Selectable</span>
	</div>
</label>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-11.svelte)


## badge-12

> A type-safe, accessible badge-12 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-12`
- **Location**: `/src/lib/components/badges/badge-12.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`lucide-svelte`](https://github.com/lucide-icons/lucide)

Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';

	import X from 'lucide-svelte/icons/x';

	let isActive = $state(true);
</script>

{#if isActive}
	<Badge>
		Removable
		<button
			class="-my-px -me-1.5 -ms-px inline-flex size-5 shrink-0 items-center justify-center rounded-[inherit] p-0 opacity-60 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70"
			onclick={() => (isActive = false)}
		>
			<X size={12} stroke-width={2} aria-hidden="true" />
		</button>
	</Badge>
{/if}

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-12.svelte)


## badge-13

> A type-safe, accessible badge-13 component for building modern UIs. This component is part of the badges collection.

### Core Information

- **Component ID**: `badge-13`
- **Location**: `/src/lib/components/badges/badge-13.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`lucide-svelte`](https://github.com/lucide-icons/lucide)

Full component implementation:

```svelte
<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';

	import X from 'lucide-svelte/icons/x';

	let isActive = $state(true);
</script>

{#if isActive}
	<Badge variant="outline" class="rounded-md px-2 py-1">
		Tag
		<button
			class="-my-[5px] -me-2 -ms-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-[inherit] p-0 opacity-60 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70"
			onclick={() => (isActive = false)}
			aria-label="Delete"
		>
			<X size={14} stroke-width={2} aria-hidden="true" />
		</button>
	</Badge>
{/if}

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-13.svelte)