バッジ

ステータスやカテゴリーのような小さな情報を表示するには、<Badge>コンポーネントを使用します。

プレビュー

新着

インポート

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

使用方法

バッジを表示するには、<Badge>コンポーネントを使用し、表示したい内容をtext属性に渡します。

デフォルトでは、バッジはサイトのテーマのアクセントカラーを使用します。 組み込みのバッジカラーを使用するには、variant属性をサポートされている値のいずれかに設定します。

MDX

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

<Badge text="ノート" variant="note" />
<Badge text="成功" variant="success" />
<Badge text="ヒント" variant="tip" />
<Badge text="注意" variant="caution" />
<Badge text="危険" variant="danger" />

Markdoc

{% badge text="ノート" variant="note" /%}
{% badge text="危険" variant="success" /%}
{% badge text="ヒント" variant="tip" /%}
{% badge text="注意" variant="caution" /%}
{% badge text="危険" variant="danger" /%}

プレビュー

ノート成功ヒント注意危険

異なるサイズの使用

size属性を使用してバッジのテキストサイズを制御します。

MDX

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

<Badge text="新着" size="small" />
<Badge text="新着かつ改良" size="medium" />
<Badge text="新着、改良、もっと大きく" size="large" />

Markdoc

{% badge text="新着" size="small" /%}
{% badge text="新着かつ改良" size="medium" /%}
{% badge text="新着、改良、もっと大きく" size="large" /%}

プレビュー

新着新着かつ改良新着、改良、もっと大きく

バッジのカスタマイズ

カスタムCSSを使用して、classやstyleなどの他の<span>属性を使用してバッジをカスタマイズします。

MDX

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

<Badge text="カスタム" variant="success" style={{ fontStyle: 'italic' }} />

Markdoc

{% badge text="カスタム" variant="success" style="font-style: italic;" /%}

プレビュー

カスタム

<Badge> プロパティ

実装: Badge.astro

<Badge>コンポーネントは、以下のプロパティおよびその他の<span>要素の属性を受け付けます。

text

必須
型: string

バッジに表示するテキスト内容。

variant

型: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
デフォルト: 'default'

使用するバッジのカラーバリアント: note (青), tip (紫), danger (赤), caution (オレンジ), success (緑), または default (テーマのアクセントカラー)。

size

型: 'small' | 'medium' | 'large'

表示するバッジのサイズを定義します。