Button Group

関連する複数のボタンを角丸を共有するひとかたまりにまとめ、操作の関係性を視覚的に示すコンポーネントです。ジョブアンテナでは検索結果の並び替え(新着/おすすめ)やページ送り、求人カードの応募+いいかも!のようなスプリットボタンに使います。ButtonGroupText でラベルを、ButtonGroupSeparator で区切り線を差し込めます。

基本

outline ボタンの横並び、ButtonGroupText によるラベル付き、orientation="vertical" の縦並びという基本の3構成です。

並び替え

検索結果の並び替え切り替えです。選択中の項目を secondary、それ以外を outline にして現在の並び順を示します。

ページ送り

検索結果のページ送りです。現在ページを secondary + aria-current で示し、省略は ButtonGroupText、端では前後ボタンを disabled にします。

求人カードの操作

応募するといいかも!を ButtonGroupSeparator で仕切ったスプリットボタンです。応募後は両方 disabled にして応募済みを表します。