# Badge

Edit inline status badges and labels in Starlight and Prosefly MDX documentation.

import ContentEditor from '@/components/editor/ContentEditor.astro';

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](/frameworks/astro/), [Starlight](/frameworks/starlight/), [Fumadocs](/frameworks/fumadocs/), and [Prosefly](/frameworks/lotus/) 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.

<ContentEditor content="badge" />

## Source example

```mdx
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:

```mdx
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](/docs/editor/components/icon/) · [Link Button](/docs/editor/components/link-button/) · [Callout](/docs/editor/components/callout/).