ボタンは、ユーザーのアクション（送信、キャンセル、遷移など）をトリガーする最も基本的な要素です。

階層 (Hierarchy)

画面上のすべてのアクションが同じ重要度ではありません。重要度に応じてボタンのスタイルを使い分けることで、ユーザーを適切な導線へ誘導します。

1. Primary Button (主要ボタン)

画面内で 最も実行してほしいアクション に使用します（例：「購入する」「送信する」「新規作成」）。 1画面につき原則1つだけに絞るのが理想です。

• スタイル : 目立つ背景色（ブランドカラーの塗りつぶし）。

2. Secondary Button (副次ボタン)

主要ではないが重要なアクションに使用します（例：「下書き保存」「戻る」）。

• スタイル : 枠線のみ（Outline）または薄い背景色。

3. Ghost / Tertiary Button (三次ボタン)

重要度の低いアクションや、補助的な操作に使用します（例：「キャンセル」「詳細を見る」）。

• スタイル : 背景なし、テキストのみ（ホバーで背景出現）。

状態 (States)

ボタンはインタラクションに応じてフィードバックを返す必要があります。

• Default : 通常状態。
• Hover : マウスカーソルが乗った状態。クリック可能であることを示唆します。
• Active / Pressed : クリックされた瞬間。押した感触を与えます。
• Disabled : 操作不可能な状態。薄くグレーアウトし、カーソルも禁止マークなどに変更します。「なぜ押せないのか」がわかるようにツールチップなどを併用するのが親切です。
• Loading :処理中。二重送信を防ぐために、スピナーを表示してクリック不可にします。

ラベリング (Labeling)

• 動詞で始める : ユーザーが何をするかを明確にします（×「設定」、○「設定を保存する」）。
• 簡潔に : 長すぎるラベルは避け、核心を突く言葉を選びます。
• コンテキストを含める : スクリーンリーダー利用者のために、単に「詳細」ではなく「『記事A』の詳細を見る」のように、文脈がわかるように記述するか、aria-label で補足します。