# バッジ

Starlight と Prosefly の MDX ドキュメントで、インラインの状態バッジやラベルを編集します。

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

Prosefly の MDX コンポーネントエディターでインラインバッジを編集し、Starlight または Prosefly の構文を保てます。

## 対応プロファイル

同じエディターで [Astro](/ja/frameworks/astro/)、[Starlight](/ja/frameworks/starlight/)、[Fumadocs](/ja/frameworks/fumadocs/)、[Prosefly](/ja/frameworks/lotus/) の各プロファイルを使えます。サイトに合うプロファイルを選ぶと、その連携で利用できる構文と編集コントロールを確認できます。

## ビジュアルモードで編集する

バッジを選択すると、インラインの操作が開きます。ラベルと、そのプロファイルで設定できる表示属性を変更できます。削除操作では、周囲の段落を残してバッジだけを取り除けます。

<ContentEditor content="badge" />

## ソースの例

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

## 公開ステータス

チームが確認している間、このガイドは <Badge text="プレビュー" variant="tip" /> です。
```

## プロファイルによる違い

Prosefly は子要素のテキストをラベルに使い、対応する `variant` と `color` を指定できます。Starlight は `text` 属性にラベルを保存し、独自の variant と size の値を使います。

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

リリース状況：<Badge text="プレビュー" variant="note" />。
```

Fumadocs プロファイルに専用の Badge 機能はありません。ラベルや色の編集は文書の内容を変えるもので、アプリの状態は変更しません。独自のバッジはソースで編集できます。

## 関連する MDX ガイド

次に読む: [アイコン](/docs/ja/editor/components/icon/) · [リンクボタン](/docs/ja/editor/components/link-button/) · [コールアウト](/docs/ja/editor/components/callout/).