# 徽标

编辑 Starlight 和 Prosefly MDX 文档中的行内状态徽标与标签。

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

使用 Prosefly 的 MDX 组件编辑器编辑行内徽标，同时保留 Starlight 或 Prosefly 网站使用的语法。

## 支持的配置

同一个编辑器支持 [Astro](/zh-cn/frameworks/astro/)、[Starlight](/zh-cn/frameworks/starlight/)、[Fumadocs](/zh-cn/frameworks/fumadocs/) 和 [Prosefly](/zh-cn/frameworks/lotus/) 配置。选择与你的网站匹配的配置，即可查看该集成支持的组件语法和编辑控件。

## 可视化编辑

选中徽标，打开行内编辑控件，修改文字和当前配置提供的样式属性。通过删除操作移除徽标，周围的段落文字会保留。

<ContentEditor content="badge" />

## 源码示例

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

## 发布状态

团队审阅期间，这份指南处于 <Badge text="预览" variant="tip" /> 状态。
```

## 配置差异

Prosefly 使用组件内的文字，并支持相应的 `variant` 和 `color` 属性。Starlight 将文字保存在 `text` 属性中，使用自己的样式和尺寸选项：

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

发布状态：<Badge text="预览" variant="note" />。
```

Fumadocs 配置没有专门的 Badge 功能。修改徽标文字或颜色，只会修改文档内容，不会改变应用中的实际状态。自定义徽标仍可在源码模式中编辑。

## 相关 MDX 指南

继续阅读：[图标](/docs/zh-cn/editor/components/icon/) · [链接按钮](/docs/zh-cn/editor/components/link-button/) · [提示块](/docs/zh-cn/editor/components/callout/).