Stats

数値ハイライト

GitHub でソースを見る

プレビュー

24+コンポーネントUIライブラリに含まれる総数
100%TypeScript
0依存関係

使いどころ

使う場面

  • 導入社数、処理件数、削減時間など、実績の数字を 3 から 4 個並べる
  • StatItem の value に数字と単位（「1,200 社」）、label に何の数字か、description に条件を書く
  • 数字は実データのものだけを使う。集計の時点や範囲を description で示す

使わない場面

  • ダッシュボードの指標。Metric を使う
  • 根拠のない数字。出典や期間を示せないなら置かない
  • 5 個以上の並べ方。読み手が拾えなくなる
  • 数字の比較・推移。推移はチャート（BarChart、LineChart）を使う

使い方

<Stats>
  <StatItem value="24+" label="コンポーネント" description="UIライブラリに含まれる総数" />
  <StatItem value="100%" label="TypeScript" />
</Stats>

プロパティ

名前型デフォルト説明
valuestringなし数値（StatItem）
labelstringなしラベル（StatItem）
descriptionstringなし補足テキスト（StatItem）

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • 出力は <div> と <span> だけで、役割や項目数は伝わらない。value、label、description の順に読まれる
  • value は文字列で渡す。単位まで含め、数字だけを装飾で分けるときも読み上げで意味が通るようにする

文言

  • label は「何の数字か」を名詞で（「導入企業数」）。「実績」のような総称にしない
  • ダミーデータは社名・人名とも、リポジトリで決めたプールから使う。実在企業の数字に見える値を入れない

関連するコンポーネント