Badge

Use Prosefly’s MDX component editor to edit inline badges while keeping the syntax used by your Starlight or Prosefly site.

Supported profiles

The same editor supports the Astro, Starlight, Fumadocs, and Prosefly profiles. Select the profile that matches your site to see the component syntax and controls available for that integration.

Edit in Visual

Select the badge to open its inline controls. Change the label and the appearance properties offered by its profile. Use the delete action to remove the badge while keeping the surrounding paragraph.

badge.mdx

StarlightProsefly

VisualSource

Reset example

Loading editor…

An interactive example. Changes stay on this page.

Source example

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

## Release status

This guide is <Badge text="Preview" variant="tip" /> while the team reviews it.

Profile differences

Prosefly uses child text with supported variant and color properties. Starlight stores the label in a text property and supports its own variant and size values:

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

Release status: <Badge text="Preview" variant="note" />.

The Fumadocs profile has no dedicated Badge feature. Editing a badge’s label or color does not change an application status; it changes the document content. Custom badges remain editable in Source.

Related MDX guides

Read next: Icon · Link Button · Callout.