Button
Buttonコンポーネントは、ユーザーが情報の保存や検索などの操作をできるようにします。
使用上の注意
type="button" について
SmartHR UIのButtonには意図しないsubmitを防ぐために、type="button"がついています。
そのため、form submitを使いたい場合は、必ずtype="submit"を明記してください。
種類
ボタンの優先度や役割に合わせた4種類のコンポーネントを総称して、Buttonコンポーネントとして定義しています。
Primary
画面の主要なアクションを促すボタンです。
1つの画面に複数のPrimaryボタンを使わないでください。複数のPrimaryボタンがあるとユーザーは何をすればいいかわからなくなります。
Secondary
画面でのアクションを促す、Primaryボタンに対する副次的なボタンとして使います。
SmartHR UI では特に種類の指定をしない場合はSecondaryになります。
画面内にボタンが多すぎる場合、ユーザーは次に何をすればいいのか戸惑うかもしれません。その場合はボタンを減らしたり、画面を簡略化したり、複数の画面に分けることを検討しましょう。
Danger
破壊的なアクション（データの永久消去など）の実行前に、ユーザーに一歩立ち止まって考えてもらいたいときに使います。
- Dangerボタンが頻出すると効果がありません。
- 主に削除ダイアログ）で使います。削除ダイアログを呼び出すボタンにはDangerボタンを使いません。
- すべてのユーザーが色を見たり、理解できるわけではないため、警告を促す赤色（
DANGER）に頼らないでください。ボタン配置のコンテキストやラベルテキストは重要です。
Text
Secondaryボタンよりもさらに優先度が低いアクションのボタンとして使います。
また、ドロップダウンメニューとして使用したり、アイコンボタンとして使用するなど、ボタンではあるもののボタンの装飾を必要としない場合に使います。
AnchorButton
リンク（a要素）をボタンのように見せるためのコンポーネントですが、どうしようもないときだけ使います。
アクションボタンとして表現したい場合は、素直にButtonを使いましょう。
レイアウト
サイズやアイコンの有無で、コンポーネント内のレイアウトにバリエーションがあります。
「サイズ小かつアイコン付き（左）」のように組み合わせることもできます。
ボタンサイズ
2種類の大きさのボタンを使用できます。
SmartHR UIでは、サイズ（sizeprops）で指定できます。
| 種類 | 表示例 | 説明 |
|---|---|---|
通常 | 通常のサイズです。 | |
小 | レイアウトの都合上、どうしようもない場合に使うサイズです。 |
アイコンの有無
アイコン付きボタン
ラベルテキストの左右にアイコンを配置できます。
SmartHR UIでは、プレフィックス（prefixprops）およびサフィックス（suffixprops）にIconを指定することで表現できます。
ただし、左右のアイコンを同時に指定しないでください。アイコン付き（右）を優先し、アイコンを右に表示する場合は左のアイコンは設定しないようにしましょう。
| 種類 | 表示例 | アイコンの役割 |
|---|---|---|
アイコン付き（左） | ボタンのアクション（機能）を表すために使います。 同じアクションのボタンには、同じアイコンを採用してください。 | |
アイコン付き（右） | ドロップダウンのように、ボタン押下後に表示するUIを想起させるために使います。 （例：ドロップダウンメニューボタン、Dropdown、FilterDropdown） |
アイコンボタン
アイコンのみのボタンです。ラベルテキストを表示するレイアウト上の余裕がない場合などに使います。
ラベルテキストがないため、アイコンには必ず代替テキストを含めてください。
状態
マウスオーバー
マウスポインタでボタンに触れている状態（hover状態）のスタイルです。
マウスオーバーを認知できるように、標準時の背景色にOVERLAYを重ねて表現します。
無効（disabled）
ボタンの操作ができない状態を表現したスタイルです。
無効状態のボタンはコントラストが低くユーザーを混乱させるため、できるだけ使わないようにしてください。
ユーザーはなぜ無効になっているのかわからないことがあります。権限による表示制御のデザインパターンを参考にして、そもそも無効ではなくボタン自体を非表示にしたり、無効状態の理由を付近に表示することを検討してください。
無効状態の理由を配置するスペースがどうしてもない場合、disabledDetailpropsで理由を表示することを検討します。
ライティング
ラベルの書き方
ラベルは、そのボタンが担うアクションを体言止めで書きます。
- ユーザーが入力したフォームを「送信」
- タスクやオブジェクトを「追加」
- 次のプロセスに進む「次へ」
「権限を追加」「申請を取り消し」など、対象のオブジェクト名などを明記しないとアクションが伝わりにくい場合は「を」で接続します。
ラベルの判断基準は以下のとおりです。
Props
ボタンの大きさ
ボタン内に表示する内容
コンポーネントに適用するクラス名
無効な理由
ボタン内の先頭に表示する内容。 通常は、アイコンを表示するために用いる。
ボタン内の末尾に表示する内容。 通常は、アイコンを表示するために用いる。
true のとき、ボタンを正方形にする。
true のとき、ボタンの width を 100% にする。
ボタンのスタイルの種類
処理が走ってるかどうか