# Badge

> A short pill of status text in five treatments and two sizes, with native span attributes passed through.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Data Display
- Tags: badge, label, status, pill, tag, chip
- Types: `BadgeProps`, `BadgeAttributes`, `BadgeVariant`, `BadgeSize`
- Docs: https://fancy-ui.rama.app/docs/components/badge
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/badge

## Import

```svelte
<script lang="ts">
  import { Badge } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Badge } from 'fancy-ui-react';` (`class` becomes `className`, snippets become `ReactNode`, DOM callbacks are camel-cased; exact names on https://fancy-ui.rama.app/docs/components/react/badge.md).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "secondary" \| "outline" \| "destructive" \| "success"` | `"default"` | Visual treatment. Always pair it with a visible word: colour is never the message |
| `size` | `"sm" \| "md"` | `"md"` | Compact or regular |
| `class` | `string` | — | Additional CSS classes |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | The label |

## Examples

### Basic Usage

The five variants, each with a visible word.

```svelte
<script lang="ts">
	import { Badge } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap items-center gap-2">
	<Badge>Default</Badge>
	<Badge variant="secondary">Secondary</Badge>
	<Badge variant="outline">Outline</Badge>
	<Badge variant="destructive">Destructive</Badge>
	<Badge variant="success">Success</Badge>
</div>
```

### Sizes

Compact and regular, beside the rows they describe.

```svelte
<script lang="ts">
	import { Badge } from "fancy-ui-svelte";
</script>

<div class="flex flex-col gap-4">
	<div class="flex flex-wrap items-center gap-2">
		<Badge size="sm" variant="secondary">Small</Badge>
		<Badge size="md" variant="secondary">Regular</Badge>
	</div>
	<ul class="flex flex-col gap-2 text-sm">
		<li class="flex items-center justify-between gap-6">
			<span>Inbox</span>
			<Badge size="sm">12</Badge>
		</li>
		<li class="flex items-center justify-between gap-6">
			<span>Deploys</span>
			<Badge size="sm" variant="destructive">2 failed</Badge>
		</li>
		<li class="flex items-center justify-between gap-6">
			<span>Billing</span>
			<Badge size="sm" variant="success">Paid</Badge>
		</li>
	</ul>
</div>
```