# Badge

Add compact status labels without interrupting prose.

import { Badge } from '@prosefly/astro-components';

Use `Badge` for short metadata: release status, compatibility, risk level,
feature category, or version information. Badges work best beside headings,
inside cards, or in short reference tables.

## Import

```mdx
import { Badge } from '@prosefly/astro-components';
```

## Common Labels

<Badge>Default</Badge> <Badge color="accent">New</Badge> <Badge color="info">Info</Badge> <Badge color="success">Stable</Badge> <Badge color="warning">Beta</Badge> <Badge color="danger">Breaking</Badge>

```mdx
<Badge>Default</Badge>
<Badge color="accent">New</Badge>
<Badge color="info">Info</Badge>
<Badge color="success">Stable</Badge>
<Badge color="warning">Beta</Badge>
<Badge color="danger">Breaking</Badge>
```

## Visual Weight

Use `variant` to control emphasis.

<Badge color="accent" variant="solid">Solid</Badge> <Badge color="accent" variant="soft">Soft</Badge> <Badge color="accent" variant="subtle">Subtle</Badge> <Badge color="accent" variant="outline">Outline</Badge>

```mdx
<Badge color="accent" variant="solid">Solid</Badge>
<Badge color="accent" variant="soft">Soft</Badge>
<Badge color="accent" variant="subtle">Subtle</Badge>
<Badge color="accent" variant="outline">Outline</Badge>
```

Prefer `soft` or `subtle` in long-form docs. Reserve `solid` for labels that
must stand out immediately.

## Props

| Prop | Type | Default |
| --- | --- | --- |
| `color` | `'neutral' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` |
| `variant` | `'solid' \| 'soft' \| 'subtle' \| 'outline'` | `'soft'` |