Button
Buttonコンポーネントは、ユーザーが情報の保存や検索などのアクションを実行できるようにします。
SmartHR UI v12.1.1 ・ Storybook
ラベルの書き方
ラベルは、そのボタンが担うアクションを体言止めで書きます。
たとえば、
- ユーザーが入力したフォームを「送信」
- タスクやオブジェクトを「追加」
- 次のプロセスに進む「次へ」
「別の情報を追加」など、多くの情報を含める必要がある場合には「を」で接続します。
- 「権限を追加」
- 「申請を取り消し」
種類
Primary
ページの主要な行動を促すボタンです。SmartHR UIではPrimaryButtonです。
1つのページに複数のプライマリーボタンを使わないでください。複数のプライマリーボタンがあるとユーザーは何をすればいいかわからなくなります。
| 表示 | タイプ |
|---|---|
| 標準 | |
| アイコン付き（左） | |
| アイコン付き（右） | |
| アイコンのみ 必ず代替テキストを含めてください。何のボタンなのかわからないユーザーがいるかもしれません。 |
Small
レイアウトの都合上、どうしようもない場合に使います。
| 表示 | タイプ |
|---|---|
| 標準 | |
| アイコン付き（左） | |
| アイコン付き（右） | |
| アイコンのみ 必ず代替テキストを含めてください。何のボタンなのかわからないユーザーがいるかもしれません。 |
Secondary
ページでのアクションを促す副次的なボタンとして使います。SmartHR UIではSecondaryButtonです。
複数のアクションを促すデフォルトボタンが多すぎる場合、ユーザーは次に何をすればいいのか戸惑うかもしれません。その場合はページを簡略化したり、複数のページに分けましょう。
| 表示 | タイプ |
|---|---|
| 標準 | |
| アイコン付き（左） | |
| アイコン付き（右） | |
| アイコンのみ 必ず代替テキストを含めてください。何のボタンなのかわからないユーザーがいるかもしれません。 |
Small
レイアウトの都合上、どうしようもない場合に使います。
| 表示 | タイプ |
|---|---|
| 標準 | |
| アイコン付き（左） | |
| アイコン付き（右） | |
| アイコンのみ 必ず代替テキストを含めてください。何のボタンなのかわからないユーザーがいるかもしれません。 |
DangerButton
SmartHR UIではDangerButtonです。
ユーザーに一歩立ち止まって考えてもらいたいときに使います。頻出していると効果がありません。
データを永久に消去するなど、破壊的なアクションを示す際に使います。
ユーザーにこのアクションを実行させる場合は、必ず確認を求めるステップを追加してください。
また、すべてのユーザーが色を見たり、理解できるわけではないため、警告を促す赤い色に頼らないでください。警告ボタンの配置コンテキストやボタンテキストは重要です。
| 表示 | タイプ |
|---|---|
| 標準 | |
| アイコン付き（左） | |
| アイコン付き（右） | |
| アイコンのみ 必ず代替テキストを含めてください。何のボタンなのかわからないユーザーがいるかもしれません。 |
Small
レイアウトの都合上、どうしようもない場合に使います。
| 表示 | タイプ |
|---|---|
| 標準 | |
| アイコン付き（左） | |
| アイコン付き（右） | |
| アイコンのみ 必ず代替テキストを含めてください。何のボタンなのかわからないユーザーがいるかもしれません。 |
Text
SmartHR UIではTextButtonです。
| 表示 | タイプ |
|---|---|
| 標準 | |
| アイコン付き（左） | |
| アイコン付き（右） | |
| アイコンのみ 必ず代替テキストを含めてください。何のボタンなのかわからないユーザーがいるかもしれません。 |
Small
レイアウトの都合上、どうしようもない場合に使います。 （WIP。ここに使い方の説明が入ります）
| 表示 | タイプ |
|---|---|
| 標準 | |
| アイコン付き（左） | |
| アイコン付き（右） | |
| アイコンのみ 必ず代替テキストを含めてください。何のボタンなのかわからないユーザーがいるかもしれません。 |
状態
マウスオーバー
マウスオーバーした際のスタイルとして使用します。
マウスオーバーを認知できるように、標準時の背景色にOVERLAYを重ねて表現します。
無効
無効にしたボタンはできるだけ使わないようにしてください。
無効にしたボタンはコントラストが低くユーザーを混乱させます。また、ユーザーはなぜ無効になっているのかわからないことがあります。
補足
アイコン付きボタン
ボタンがもつ機能を表すアイコンをつけるとユーザーの認知を助けるかもしれません。
ただし、プルダウンなど別の機能を持つ場合には機能を表すアイコンを消しましょう。
type="button" について
SmartHR UIのButtonには意図しないsubmitを防ぐために、type="button"がついています。
そのため、form submitを使いたい場合は、必ずtype="submit"を明記してください。