Button

ラベルの書き方

ラベルは、そのボタンが担うアクションを体言止めで書きます。
たとえば、

• ユーザーが入力したフォームを「送信」
• タスクやオブジェクトを「追加」
• 次のプロセスに進む「次へ」

「別の情報を追加」など、多くの情報を含める必要がある場合には「を」で接続します。

• 「権限を追加」
• 「申請を取り消し」

種類

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"を明記してください。

参考文献

• https://design-system.service.gov.uk/components/button/