Badge

ステータスや属性を短いラベルで表示するコンポーネント。ジョブアンテナでは求人カードのタグ(新卒採用、Web履歴書OK など)、応募者の選考ステータス、管理画面メニューの未読件数に使う。バリアントの色で情報の種類と緊急度を伝える。

基本

default / secondary / destructive / outline / ghost / link の6バリアント。data-icon 属性でアイコンを先頭・末尾に添えられる。

求人カードのタグ

求人カードで募集条件のタグを並べる例。新着(NEW)は default で目立たせ、属性タグは secondary、補足条件は outline で階層をつける。

応募ステータス

応募者リストで選考状況を示す例。未対応は destructive、対応中は secondary、内定は default、不採用は outline と、対応の緊急度で色を割り当てる。

未読件数

管理画面のメニュー項目に件数を添える例。通常の件数は secondary、未読メッセージなど対応が必要なものだけ destructive にする。