§14-05Commerce
Usage meter
契約上限に対する利用量をバーで示す。
残りの枠を事前に把握させ、上限到達の驚きを防ぐ。容量や API 回数など、超過が課金や停止につながる場面で効く。
実装のポイント
閾値(例: 75%、90%)で色を変え、色以外に数値と残量テキストも出す。各バーは role=meter か progressbar に aria-valuenow を付けて読み上げられるようにする。
- 特徴
- CSS のみ
- アクセシビリティ
- デモで使っているもの
- lucide-react