Badge

Add compact status labels without interrupting prose.

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

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

Common Labels

Default New Info Stable Beta Breaking

<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.

Solid Soft Subtle Outline

<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'`

Edit this page

Last updated Jul 18, 2026