バッジ

バッジは、Starlight ↗によって提供される組み込みコンポーネントです。例えば、製品がベータ版であることを示すために使用します。

ノート

他のテキストとインラインでバッジを使用する方法については、インラインバッジを参照してください。

コンポーネント

新しい 非推奨 Starlight カスタム

import { Badge } from "~/components";

<Badge text="新しい" variant="tip" size="small" />
<Badge text="非推奨" variant="caution" size="medium" />
<Badge text="Starlight" variant="note" size="large" />
<Badge text="カスタム" variant="success" style={{ fontStyle: "italic" }} />

サイドバー

バッジは、ページのフロントマターを介してサイドバーに追加できます。

---
title: こんにちは世界
sidebar:
  badge:
    variant: tip
    text: 新しい
---

製品にベータバッジを追加したい場合は、variant: エントリを省略します：

---
title: こんにちは世界
sidebar:
  badge:
    text: ベータ
---