primitives · @awesome-ds/react
Badge
状態や分類を短く示すラベル。
状態マトリクス
通常
構造
- インライン領域
- 短い状態ラベル
キーボード操作契約
通常はフォーカスを受けません。操作要素の中で使う場合は、その要素の標準キー操作に従います。
スクリーンリーダー契約
文書順に短い状態文言を読み上げます。装飾目的なら利用側で読み上げ対象から外します。
コンテンツ規則
- 1〜2語の短い状態名にします。
- 色やtoneだけに重要な意味を持たせません。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
tone | BadgeTone | — | 意味に応じた視覚tone。 |
children | ReactNode | 必須 | 表示または読み上げ対象となる内容。 |
…native | HTMLAttributes<HTMLSpanElement> | — | 対応するネイティブ要素の標準属性。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
標準強調
コピー可能な実装例
import { Badge } from "@awesome-ds/react";
<Badge tone="accent">New</Badge>