Badge

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

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 New, and can be used independently from the Lotus theme Stable.

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 Ready supports keyboard navigation, while page actions Experimental may change before the first release.

Version Hints

Install Lotus with Astro v7 and Tailwind CSS v4.

Heading Metadata

Package Exports Public API

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

Variants

Use variant to change the visual weight of the badge.

Colors

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

Props

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.