複数の操作をまとめるボタン

複数の操作を1つのボタンにまとめる場合のパターンを定義します。

構成

複数の操作をまとめるボタンは、以下の要素で構成されています。

  1. アクションボタン
  2. ドロップダウン

複数の操作をまとめるボタン

1. アクションボタン

複数の操作がまとまっていることを示唆するために、SecondaryButtonアイコン付き(右)タイプで、「展開」アイコン(fa-caret-down)を使用します。

2. ドロップダウン

Dropdownを用いて、操作の選択肢を表示します。
選択肢は、下記の5つのパターンから用途にあったものを選択してください。

種類

用途によって5つのパターンを定義します。

#パターン名用途
A単一のオブジェクトに対する操作オブジェクトに関する複数の操作をまとめるときに使用します。
B単一のオブジェクトに対する操作(オブジェクト名省略)特定のオブジェクトの操作であることがレイアウト上自明なとき(例えばよくあるテーブルの行の中など)に使用します。
C同一の操作同じ種類の操作をまとめるときに使用します。
D異なる複数の操作異なる複数の操作を適切に分割できなかったり、まとめ方が無いときに、異なる複数の操作をまとめるために使用します。
E異なる複数の操作(ラベル省略)Dのパターンに該当し、ボタンを配置するスペースを十分確保できないときに使用します。

A. 単一のオブジェクトに対する操作

{オブジェクト名}の操作ボタン

オブジェクトに関する操作をまとめるときに使用します。

要素説明
アクションボタンラベルは{オブジェクト名}の操作とします。
ドロップダウンオブジェクトに対して行なう操作を入れます。

B. 単一のオブジェクトに対する操作(オブジェクト名省略)

操作ボタン

操作の対象になるオブジェクトがレイアウト上自明なときに使用します。(例えばよくあるテーブルの行の中など)

要素説明
アクションボタン基本はA. オブジェクト名のようにオブジェクト名を表示しますが、狭い場所にレイアウトするときにオブジェクト名を省略できます。ラベルは操作にします。
ドロップダウンオブジェクトに対して行なう操作を入れます。アクションボタンのラベルと同様にオブジェクト名を省略できます。

C. 同一の操作

同じ種類の操作ボタン

同じ種類の操作をまとめるときに使用します。

要素説明
アクションボタン操作をまとめるラベルにします。
ドロップダウン同じ種類の操作を入れます。

D. 異なる複数の操作

その他のボタン

他のA~Cのパターンに該当しないときに、異なる複数の操作をまとめるために使用します。

要素説明
アクションボタンラベルはその他の操作とします。
ドロップダウン異なる複数の操作を入れます。

E. 異なる複数の操作(ラベル省略)

ラベル省略ボタン

D. 異なる複数の操作に該当し、ボタンを配置するスペースを十分確保できないときに使用します。

要素説明
アクションボタンSecondaryButtonアイコンのみタイプで「その他の操作」アイコン(fa-ellipsis-h)を使用します。ラベルは視覚的に省略しますが、必ず代替テキストを含めて何のボタンなのかを伝えるようにしましょう。
ドロップダウンD. 異なる複数の操作と同様です。
© 2021, SmartHR, Inc.