Badge
ステータスや属性を短いラベルで表示するコンポーネント。ジョブアンテナでは求人カードのタグ(新卒採用、Web履歴書OK など)、応募者の選考ステータス、管理画面メニューの未読件数に使う。バリアントの色で情報の種類と緊急度を伝える。
基本
default / secondary / destructive / outline / ghost / link の6バリアント。data-icon 属性でアイコンを先頭・末尾に添えられる。
求人カードのタグ
求人カードで募集条件のタグを並べる例。新着(NEW)は default で目立たせ、属性タグは secondary、補足条件は outline で階層をつける。
応募ステータス
応募者リストで選考状況を示す例。未対応は destructive、対応中は secondary、内定は default、不採用は outline と、対応の緊急度で色を割り当てる。
未読件数
管理画面のメニュー項目に件数を添える例。通常の件数は secondary、未読メッセージなど対応が必要なものだけ destructive にする。