Toggle
オンとオフの二値を1つのボタンで切り替えるコンポーネント。@base-ui/react ベースで defaultPressed による非制御利用に対応し、押下状態は aria-pressed の背景色で示す。ジョブアンテナでは求人カードのお気に入り(星)、検索条件のこだわりフィルタなど、その場で状態が反映される単体トグルに使う。
基本
default / outline の2バリアントと sm / default / lg の3サイズ。defaultPressed で初期押下、disabled で無効化する。data-icon 属性でアイコンの余白を調整できる。
お気に入り
求人カードの右上に星アイコンだけのトグルを重ねる例。押下すると星が塗りつぶされる。テキストがないので aria-label で名前を補う。
こだわりフィルタ
検索条件で雇用形態・勤務地・こだわりを絞り込む例。各トグルを独立させることで複数条件を同時に選べる。選択中は背景色で強調される。