# Badge

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

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

## Import

```tsx
import { Badge } from 'fancy-ui-react';
```

Setup (once per project): `npm install fancy-ui-react`, then put these lines in your main CSS file (the stylesheet import goes right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-react/tailwind.css";
```

and import the component styles once in the app entry: `import "fancy-ui-react/styles.css";`. Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in React; when one differs from the Svelte name, the Svelte name follows in parentheses. `class` becomes `className`, a callback takes the name the React port declares (`onclick` becomes `onClick`), snippets become `ReactNode` props (render functions when they take arguments) and the default snippet is `children`. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/react#divergences-from-the-svelte-api

## 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 |
| `className` (Svelte `class`) | `string` | — | Additional CSS classes |

## Node props

| Prop | Description |
| --- | --- |
| `children` | The label |

## Example

```tsx
import { Badge } from "fancy-ui-react";

export function BadgeExample() {
	return (
		<div className="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>
	);
}
```