ボタン

プライマリー（塗り）ボタン

プライマリーボタンのコンポーネントにはsu-button-primaryのクラス名を付与します。su-button-fillのクラス名でも同様のスタイルが適用されます。

文脈に応じてbutton要素やa要素、またはinput要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。文字の調整や周囲の余白、背景色の塗りが適用され、ボタンの形状にスタイリングされます。また、マウスホバーやクリック、フォーカス時など状態に合わせて異なるスタイルが提供されています。

最も重要度の高いボタンとして表示されるUI要素です、ボタン部分全体に背景色の塗りが適用されることで、視覚的も目立つようになります。

<button type="button" class="su-button-primary">プライマリーボタン</button>
<button type="button" class="su-button-fill">塗りボタン</button>

プライマリーボタンの背景色や文字サイズ、文字色、またホバーやフォーカスリングの色はCSS変数を使って変更することが可能です。

.su-button-primary {
  --su-color-fill-button-primary: red;
  --su-color-label-button-primary: white;
  --su-color-fill-button-primary-hover: orange;
  --su-color-label-button-primary-hover: white;
  --su-color-fill-button-primary-active: pink;
  --su-color-label-button-primary-active: red;
  --su-color-ring-button-primary-focus: yellow;
  --su-size-text-button: 1rem;
}

パレットカラーの塗り

su-button-fillのクラス名ではプライマリーボタンと同じ設定が適用されますが、su-button-fill-[COLOR_NAME]と、パレットカラーのカラー名をサフィックスとすることで、パレットカラーの各配色に対応した塗りのスタイルが適用されます。

<button type="button" class="su-button-fill-red">レッドの塗りボタン</button>

セカンダリー（アウトライン）ボタン

セカンダリーボタンのコンポーネントにはsu-button-secondaryのクラス名を付与します。su-button-outlineのクラス名でも同様のスタイルが適用されます。

文脈に応じてbutton要素やa要素、またはinput要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。文字の調整や周囲の余白、色付きの境界線が適用され、ボタンの形状にスタイリングされます。また、マウスホバーやクリック、フォーカス時など状態に合わせて異なるスタイルが提供されています。

プライマリーボタンより重要度の低いボタンとして表示されるUI要素です、ボタン部分全体に色付きの境界線が適用されることで、ボタンとして認識されやすくなるとともに、周囲のデザインとの調和も生まれます。

<button type="button" class="su-button-secondary">セカンダリーボタン</button>
<button type="button" class="su-button-outline">アウトラインボタン</button>

セカンダリーボタンのボーダーや文字色、文字サイズ、またホバーやフォーカスリングの色はCSS変数を使って変更することが可能です。

.su-button-secondary {
  --su-color-outline-button-secondary: red;
  --su-color-label-button-secondary: white;
  --su-color-outline-button-secondary-hover: orange;
  --su-color-label-button-secondary-hover: white;
  --su-color-outline-button-secondary-active: pink;
  --su-color-label-button-secondary-active: red;
  --su-color-ring-button-secondary-focus: yellow;
  --su-size-text-button: 1rem;
}

パレットカラーのアウトライン

su-button-outlineのクラス名ではセカンダリーボタンと同じ設定が適用されますが、su-button-outline-[COLOR_NAME]と、パレットカラーのカラー名をサフィックスとすることで、パレットカラーの各配色に対応したアウトラインや文字色のスタイルが適用されます。

<button type="button" class="su-button-outline-red">レッドのアウトラインボタン</button>

サイズバリエーション

各ボタンコンポーネントは、クラス名を追加することでボタン周囲の余白やボタンテキストの文字サイズを調整することができます。su-button-size-smallのクラス名を付与することで、ボタン周囲の余白を狭め、ボタンテキストが小さくなったコンパクトなボタンを作ることができます。また、su-button-size-largeのクラス名を付与すると、ボタン周囲の余白を広げて、ボタンテキストも大きくなったボタンとなります。

<!-- サイズ小 -->
<button type="button" class="su-button-primary su-button-size-small">サイズ小のボタン</button>

<!-- サイズ大 -->
<button type="button" class="su-button-primary su-button-size-large">サイズ大のボタン</button>

各ボタンコンポーネントの幅は通常ボタンテキストの長さによって決まり、インラインに表示されますが、su-button-display-blockのクラス名を追加することで、親要素の幅に合わせてボタンの幅を広げて表示させることができ、ボタンテキストは中央に配置されます。

この設定は、su-button-size-smallとsu-button-size-largeのクラス名と併用可能です。サイズ小、大のボタンのブロック表示をさせることができます。

<!-- ブロック表示（サイズ小） -->
<button type="button" class="su-button-primary su-button-display-block su-button-size-small">ブロック表示（サイズ小）</button>

<!-- ブロック表示 -->
<button type="button" class="su-button-primary su-button-display-block">ブロック表示</button>

<!-- ブロック表示（サイズ大） -->
<button type="button" class="su-button-primary su-button-display-block su-button-size-large">ブロック表示（サイズ大）</button>

シェイプバリエーション

各ボタンコンポーネントは、クラス名を追加することでボタン各コーナーの形状を調整することができます。su-button-shape-squareのクラス名を追加することで、角丸スタイルが削除されたスクエア型に、su-button-shape-pillのクラス名を追加することで、ボタン両端の形状が半円になったピル型に変更することができます。

この設定は、上記のサイスバリエーションで用いられるクラス名と併用可能です。サイズ小、大のボタン、並びにブロック表示のボタンに対して形状を適用させることができます。

<!-- スクエア型 -->
<button type="button" class="su-button-primary su-button-shape-square">スクエア型のボタン</button>

<!-- ピル（半円）型 -->
<button type="button" class="su-button-primary su-button-shape-pill">ピル（半円）型のボタン</button>

状態別のスタイル

各ボタンコンポーネントはデフォルトのスタイル以外に、カーソルのホバー状態やフォーカス時、クリック動作など各状態が明示されるよう異なるスタイルを提供しています。ホバーやクリック時には背景塗りや文字色、アウトラインの色が変化し、フォーカス時にはボタン要素の周囲にフォーカスリングが表示されるようになっています。disabled属性で無効化されている状態では要素自体の透明度が変化し、グレースケールのフィルターが適用され、無効であることが明示されるスタイルが適用されます。

状態別のスタイルはボタン要素に設定されていますが、ボタンの各状態を示すクラスも用意されており、そのクラスを追加で付与することにより対象の状態と同じスタイルが適用できます。su-button-state-hoverのクラスでマウスカーソルのホバー状態、su-button-state-activeのクラスでクリック時の状態、su-button-state-focusのクラスでフォーカス時の状態、su-button-state-disabledのクラスで無効化状態と同じスタイルになります。

※これらの状態別のスタイルが適用されるクラスは、プライマリーボタン、セカンダリーボタン用のクラスが適用されている場合のみ有効です。
※これらのクラスは状態別のスタイルを付与されるものとなり、ボタンに対して実際に状態が適用されるものではありません。

<!-- ホバー状態のスタイル適用 -->
<button type="button" class="su-button-primary su-button-state-hover">ホバー状態のボタン</button>

<!-- アクティブ状態のスタイル適用 -->
<button type="button" class="su-button-primary su-button-state-active">アクティブ状態のボタン</button>

<!-- フォーカス状態のスタイル適用 -->
<button type="button" class="su-button-primary su-button-state-focus">フォーカス状態のボタン</button>

<!-- 無効化状態のスタイル適用 -->
<button type="button" class="su-button-primary su-button-state-disabled">無効化状態のボタン</button>

アクセシビリティの支援

ボタンはa要素を使う場合にアクセシビリティの対応として、role="button"属性値を使って、ボタン要素であることを明示することで、スクリーンリーダーがその役割を認識できるようにします。

使用する要素問わず、ボタン内のテキストは役割が伝わるように具体的なアクション（送信、保存など）をラベルにすることが推奨されます。その他、背景色とボタン要素、ボタン塗りとテキストのコントラスト比も十分に設けることも重要です。

<a href="/next.html" class="su-button-primary" role="button">次へ進む</a>