Retrix

Badge

短い状態を、文言と役割の色で示します。

下書き保留確認待ち公開中期限が近づいています送信失敗

今月の予約 受付中

担当者と管理者による公開前の最終確認を待っています
役割ごと
保留確認待ち公開中残りわずか送信失敗
下書き：役割の色を持たせない
下書き予約の仮押さえ公開予定要確認の下書き取り下げ予定
狭い場所で折り返す
期限が近づいています。今週中に提出してください公開前に担当者の確認を待つ下書き担当者と管理者が承認済みhttps://example.com/articles/autumn-reading-club-2026
右から左に読む場合
مسودةمعلققيد المراجعةتمت الموافقةفشل الإرسال

使いどころ

  • 公開中・確認待ち・送信失敗など、対象の今の状態を短い言葉で示す時に使います。
  • 分類や選んだ条件を示す時は、枠の付いた四角の Tag を使います。
  • 状態の理由や次の操作まで伝える時は Notice を使います。
  • 期限までの日数などの数を目立たせる時は Countdown を使います。

使い方

childrenに短い文言を渡し、tone で役割を選びます。平らな塗りの地に11pxの太字を書き、枠線・影・アイコンは付けず、色だけで分けます。Highriseの状態のラベル（「WON」「CREATED」、作業の種類のラベル）と同じく、濃い色の地に白い太字です。既定の neutral は「CREATED」の #323232、info は「Follow-up」の青（#3e79ae）、success は「WON」の緑（#498235）、warning は「Email」の橙（#be561d）、danger は色付きのタグの赤（#c50000）です。白い文字と4.5:1に届かない手本の色は、色合いを保って濃くしています。

審査や予約などの業務の状態は、アプリ側で文言と tone の役割へ変換します。

draft は下書きなどのまだ確定していない状態で、tone を渡しても役割の色を持たせず、灰色（#757575）で示します。

一行の高さは18px、角丸2pxの四角です。長い文言は文節の切れ目で折り返します。件数・担当者・期日は Badge ではなく、BC2の件数のピル（Section の件数、TaskList の detail）で示します。size="small" はタイルのアイコンの上などに重ねる、高さ16px・10pxの太字の小さなバッジです。JavaScriptは使いません。

アクセシビリティ

  • 文言をそのまま読み上げます。色は補助なので、状態の意味は文言で伝えます。
  • 「0件」のように文言だけでは何の状態か伝わらない時は、隣の文で何の数かを書きます。Badgeは役割の無い span で、aria-label の名前は読み上げで無視されることがあるので、aria-label では補いません。
  • 強制カラーモードでは地が消えるので、縁を表示します。

API

Badge

短い状態を文言と色の役割で示す。役割の無いspanなので、意味はaria-labelではなく文言か隣の文で伝える。

Badgeのprops
名前型既定値説明
toneTone"neutral"状態の役割。地をその色の濃い塗りにし、文字を白い太字にする。業務の状態（審査中・予約済みなど）は利用側でこの役割へ変換する。
draftbooleanfalse下書きなど、まだ確定していない状態。役割の色を持たせず、中立の見た目で示す。
size"default" | "small""default"smallはタイルのアイコンの上などに重ねる小さなバッジ。
childrenChild状態の短い文言。

ほかに、<span>へ標準のHTML属性を渡せます。

読み込むCSS：layers.css、reset.css、tokens.css、base.css、layout.css、components/badge.css

Tone

値："neutral" | "info" | "success" | "warning" | "danger"

コード

HTML
Hono JSX