Badge

要素にステータスや通知を付加する小さなラベルコンポーネント。新着表示やカウント表示に使用します。

Basic

jui-badge の最も基本的な使用例です。

Variants

variant プロパティを使用してコンポーネントの視覚的なスタイルを変更します。

Sizes

size プロパティを使用してコンポーネントの大きさを変更します。

Pill

pill プロパティを使用して角丸の強いピル型バッジを作成します。

関連コンポーネント

• Avatar — ユーザーやオブジェクトを視覚的に表現するコンポーネント
• Button — ユーザーがアクションを実行するためのボタンコンポーネント

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
color-mix()	カラーバリアント	111+	113+	16.4+	Baseline 2023

💡 color-mix() はバリアントごとの色生成に使用しています。2023年以降の主要ブラウザすべてで対応済みです。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
color-mix()	2023年	2025年後半 ✅

アクセシビリティ

• WAI-ARIA:
  • バッジはラベルテキストを内包する単純なインライン要素（<span>）として描画されます。role や aria-* 属性は付与されず、ステータスやカテゴリの意味はスロットに渡したテキスト内容そのものによって伝わります。
  • 色（variant）は意味を補強する視覚的な手がかりですが、色だけに依存しないよう、スロットには内容が分かるテキストを渡してください。
• 対話要素: このコンポーネントは表示専用で、クリックなどの対話的な振る舞いやキーボード操作は持ちません。

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
pill	pill	丸型にするかどうか	boolean	false
size	size	バッジのサイズ	"md" | "sm"	'sm'
variant	variant	バッジのバリアント	"brand" | "danger" | "info" | "neutral" | "success" | "warning"	'neutral'

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	ラベルテキスト（デフォルトスロット）

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"badge"	バッジのルート要素

---

Built with StencilJS