UI Component Lab English

← コンポーネント一覧

アクション

Button ボタン

フォームの送信やダイアログを開くなど、操作を実行する部品。

ボタンを押してください

見分けるポイント

短いラベル（アイコン付きのこともある）を、背景色や枠線のある押せる領域で囲んだ形。最も重要な操作はアクセントカラーで塗りつぶされることが多い。

バリエーション

プライマリ
アクセントカラーで塗りつぶしたもの。画面の主な操作に使う。
セカンダリ
枠線だけ、または薄い背景のもの。プライマリの隣で代わりの操作に使う。
ゴースト
枠線も背景もない文字だけのもの。目立たせなくてよい操作に使う。

挙動

  • クリック・タップで操作を1回実行する。
  • マウスを乗せると見た目が変わり、キーボードでフォーカスするとフォーカスリングが出る。
  • 別のページへの移動はボタンではなくリンクの役割。

キーボード操作

キー動作
Tabボタンにフォーカスを移す。
Enterボタンを実行する。
Spaceボタンを実行する。

使い分け・注意点

  • 塗りのボタンは1画面に1つにし、優先度は色だけでなく形（塗り、枠線、テキスト）でも示す。
  • 押せる領域は 44 × 44 CSS px 以上にする。
  • 無効状態のボタンは避ける。使う場合は、押せるようになる条件を近くに書く。
  • リンク: ボタンは今のページで操作を実行し、リンクは別のページや場所へ移動する。
  • トグルボタン: トグルボタンはオン・オフの状態を保ち、ボタンは押すたびに操作を1回実行する。
  • スプリットボタン: スプリットボタンは、主な操作のボタンの横に関連する操作のメニューが付く。
  • ファイルアップロード（ドロップエリア）: ボタンは操作を実行し、ファイルアップロードのボタンはファイル選択画面を開いて、選んだファイルをフォームの値として持つ。

出典