# Badge

Add compact inline labels for status, metadata, and version hints.

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

`Badge` is an inline label. Use it inside prose, headings, cards, and compact UI
where a short status or metadata value needs to sit next to surrounding text.

## Import

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

## Inline Usage

Badges are designed to stay on the same baseline as text. They should not create
a new layout section on their own.

Lotus components are published from `@prosefly/astro-components` <Badge color="accent">New</Badge>,
and can be used independently from the Lotus theme <Badge color="success">Stable</Badge>.

```mdx
Lotus components are published from `@prosefly/astro-components` <Badge color="accent">New</Badge>,
and can be used independently from the Lotus theme <Badge color="success">Stable</Badge>.
```

## Common Patterns

Use badges for short labels that support nearby content.

### Status

The search dialog <Badge color="success">Ready</Badge> supports keyboard
navigation, while page actions <Badge color="warning">Experimental</Badge> may
change before the first release.

### Version Hints

Install Lotus with Astro <Badge variant="subtle" color="accent">v7</Badge> and
Tailwind CSS <Badge variant="subtle">v4</Badge>.

### Heading Metadata

### Package Exports <Badge color="neutral">Public API</Badge>

The package exports components from `@prosefly/astro-components` through a
single entrypoint.

## Variants

Use `variant` to change the visual weight of the badge.

<div class="not-prose flex flex-wrap items-center gap-2">
  <Badge variant="solid" color="accent">Solid</Badge>
  <Badge variant="soft" color="accent">Soft</Badge>
  <Badge variant="subtle" color="accent">Subtle</Badge>
  <Badge variant="outline" color="accent">Outline</Badge>
</div>

## Colors

Use semantic colors when the badge communicates state. Use `neutral` for plain
metadata.

<div class="not-prose flex flex-wrap items-center gap-2">
  <Badge color="neutral">Neutral</Badge>
  <Badge color="accent">Accent</Badge>
  <Badge color="success">Success</Badge>
  <Badge color="warning">Warning</Badge>
  <Badge color="danger">Danger</Badge>
</div>

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `variant` | `'solid' \| 'soft' \| 'subtle' \| 'outline'` | `'soft'` | Selects the visual treatment. |
| `color` | `'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Selects the semantic color. |
| `class` | `string` | optional | Adds classes to the outer `span`. |

`Badge` also passes unknown attributes to the outer `span`, so you can add
attributes such as `title`, `aria-label`, or `data-*` when needed.

## Syntax Rules

- Keep badge text short, usually one to three words.
- Use badges inline with nearby text instead of as standalone blocks.
- Do not use badges as buttons or navigation controls.
- Prefer `soft` or `subtle` for documentation content; reserve `solid` for
  high-emphasis status labels.