Button
Buttonコンポーネントは、押すことで特定の操作や処理を実行するコンポーネントです。
使用上の注意
type=“button” について
SmartHR UIのButtonには意図しないsubmitを防ぐために、type="button"がついています。
そのため、form submitを使いたい場合は、必ずtype="submit"を明記してください。
種類
ボタンの優先度や役割に合わせた5種類のコンポーネントを総称して、Buttonコンポーネントとして定義しています。
Primary
Primaryボタンは、画面内で主要な操作をユーザーに示す役割を持ちます。
- 1つの画面で、Primaryボタンは最大で1つまでにしてください。主要な操作が複数ある場合は、画面内の主要な操作が1つになるように情報設計と画面構成を見直してください。
- ユーザーからの注目（視線）を集めることだけを目的に、Primaryボタンを使用しないでください。（参考：視線誘導）
Secondary
Secondaryボタンは、画面内の通常の操作をユーザーに示す役割を持ちます。
SmartHR UIでは、variant propsのデフォルトはsecondaryです。
- 1つの画面で使用できるSecondaryボタンの数に制限はありません。
- ただしボタンが多すぎるとユーザーが迷う要因となります。情報設計と画面構成の見直しや、DropdownMenuButtonの利用などを検討してください。
Tertiary
Tertiaryボタンは、画面内の補助的な操作をユーザーに示す役割を持ちます。主にSecondaryボタンより重要度の低い操作に使います。
他の画面へ移動するリンクとして使いたい場合は、TextLinkを使ってください。
Danger
Dangerボタンは、ワンクッション必要な操作を行なうときに、ユーザーに注意を促す役割を持ちます。
- 主に削除ダイアログで使用します。具体的な使用方法は、視覚的表現で目立ちにくくするを参照してください。
- すべてのユーザーが色を見たり、理解できるわけではありません。警告を促す赤色（
DANGER）に頼らず、ボタン配置のコンテキストやラベルテキストだけでもユーザーに伝わるように検討してください。
Text
Textボタンは、画面内の通常の操作をユーザーに示す役割を持ちます。
Secondaryボタンと役割は同じですが、Secondaryボタンの装飾（枠線）が過剰な場合に使います。例えば、次のような場合です。
- コンポーネントに内包する場合
- 多くのボタンを並べて表示する場合
Textボタンは押せることがわかりづらいため、利用には注意が必要です。単独で使う場合にはプレフィックス（prefixprops）またはサフィックス（suffixprops）にアイコンを設定してください。
AnchorButton
AnchorButtonは、リンク（a要素）をボタンのように装飾にするコンポーネントです。
アクションボタンとして表現したい場合は、Buttonを使用してください。
レイアウト
ボタンサイズやアイコンの有無で、コンポーネント内のレイアウトにバリエーションがあります。「サイズ小かつアイコン付き（左）」のように組み合わせることもできます。
ボタンサイズ
2種類の大きさのボタンを使用できます。
SmartHR UIでは、サイズ（sizeprops）で指定できます。
| 種類 | 表示例 | 説明 |
|---|---|---|
通常 | 通常のサイズです。 | |
小 | レイアウトの都合上、スペースを節約したいときに使うサイズです。 |
アイコンの有無
アイコンは、ボタンを押して実行される操作やUIを想起させる役割や、ボタンに視覚的なアクセントを与える役割を持ちます。
アイコン付きボタン
ラベルテキストの左右にアイコンを配置できます。
SmartHR UIでは、アイコン付き（左）はプレフィックス（prefixprops）に、アイコン付き（右）はサフィックス（suffixprops）にIconを指定することで表現できます。
アイコン付き（左）とアイコン付き（右）の例と役割は以下の表を参考にしてください。
| 種類 | 表示例 | アイコンの役割 |
|---|---|---|
アイコン付き（左） | ボタンを押したときに実行される操作を想起させるために使用します。同じ操作のボタンには、同じアイコンを指定してください。 | |
アイコン付き（右） | ドロップダウンのように、ボタンを押したときに特定のUIが表示される場合に使用します。 （例：DropdownMenuButton、FilterDropdown、SortDropdown） |
アイコン付きにする判断基準
アイコンを設定する判断は、以下を参考にしてください。
- アイコンは左右どちらかにのみ指定してください。どちらにもアイコンをつけられそうな場合は、
アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。 - 例外として、FilterDropdownやSortDropdownのように、「操作を想起させる役割」と「特定のUIを表す役割」の両方をアイコンが担う必要があるときは、
アイコン付き（右）（サフィックス）に「操作を想起させるアイコン」を指定する場合もあります。
アイコン付き（左）（プレフィックス）の判断基準
プレフィックスにアイコンを設定する判断は、以下を参考にしてください。
- SmartHR上で頻出する操作に関しては、アイコンをつけることを推奨します。
- レイアウトの都合でボタンの存在感を強調したい場合や、隣接するアイコン付きボタンと見た目を揃えたい場合など、必要性があればアイコンをつけることが可能です。
- 一方で明確な必要性や理由がなければ、アイコンをつけることは極力避けてください。アイコンが多すぎると、ユーザーがアイコンの意味を理解することが難しくなり、開発者としてもアイコンを作成・選定するコストがかかります。
アイコンボタン
アイコンのみのボタンです。モバイルでの表示など、ラベルテキストを表示するレイアウト上の余裕がない場合に使います。 ラベルテキストがないため、アイコンには必ず代替テキストを含めてください。
状態
マウスオーバー
マウスポインタでボタンに触れている状態（hover状態）のスタイルです。
マウスオーバーを認知できるように、標準時の背景色にOVERLAYを重ねて表現します。
無効（disabled）
ボタンの操作ができない状態を表現したスタイルです。
無効状態のボタンはコントラストが低くユーザーを混乱させるため、できるだけ使わないようにしてください。
ユーザーはなぜ無効になっているのかわからないことがあります。権限による表示制御のデザインパターンを参考にして、そもそも無効ではなくボタン自体を非表示にしたり、無効状態の理由を付近に表示することを検討してください。
無効状態の理由を配置するスペースがどうしてもない場合、disabledDetailpropsで理由を表示することを検討します。