Badges & Status Indicators

Badges are compact visual indicators used to highlight document status, feature availability, version requirements, or categorical metadata inline without cluttering your prose.

---

How to Use Badges

Call attention to feature statuses or version numbers using inline badges:

1. Import Badge: Include import { Badge } from '@astrojs/starlight/components'; in your frontmatter.
2. Define Parameters: Set the text, variant (e.g., tip, note, danger), and size.
3. Embed Inline: Drop the component directly into sentences or headings.

Behind the Curtain

1. Rendered Specimen

How badges render visually on the live site.

• Standard: v1.0.0
• Production State: Stable
• Best Practice: Recommended
• Deprecation Warning: Legacy
• Breaking Notice: Critical

2. Underlying MDX Code

The raw code required to generate the badge elements.

import { Badge } from '@astrojs/starlight/components';

<Badge text="v1.0.0" variant="note"/>
<Badge text="Stable" variant="success"/>
<Badge text="Recommended" variant="tip"/>
<Badge text="Legacy" variant="caution"/>
<Badge text="Critical" variant="danger"/>

3. Sveltia CMS Authoring

How writers add this component using the Sveltia CMS visual interface.

Thanks to the custom badge component registered in public/admin/index.html, writers can insert badges directly in Rich Text mode:

In Rich Text Mode:

1. Click the + (Add Block) button in the editor toolbar.
2. Select Starlight Badge from the dropdown menu.
3. Enter the Badge Text (e.g., v2.0 or Required).
4. Select your Color Variant (default, note, tip, caution, danger, success) and Size.

In Raw Markdown Mode: Use standard JSX tags: <Badge text="Production Ready" variant="success" size="medium" />

For a complete step-by-step walkthrough of visual component insertion, see Inserting Custom Components (CMS Magic).

Tip

Use badges sparingly within running body text. They are most effective when placed in tables, component headers, or sidebar summaries to quickly guide the reader’s eye.