ボタン／Button

ボタンを表示するためのコンポーネントです。
主にページの移動、ファイルダウンロード、ウィンドウ開閉、状態変更などに使用します。

<div class="c-buttonGroup">
  <a href="/" class="c-button">
    <span class="c-button__label">ボタン</span>
  </a>
</div>

原則

スタイルは「プライマリ」「セカンダリ」「ターシャリ」の3種類あります。標準的なボタンは「セカンダリ」を選択してください。
幅や高さ以外の形状は変更せずに利用します。
幅や高さの管理方法は2種類あります。
- 固定幅ボタン：レイアウトに応じて固定幅を選択するボタン。単独で配置する際に利用します。選択できる幅は、後述される「ボタン幅」の内容を参考にしてください。
- 可変幅ボタン：中に入る文字列の数や改行に応じて幅が可変するボタン。他のコンポーネントに内包する際に利用します。
ボタンの前後にはアイコンを挿入できますが、以下の制限があります。
- 前後のアイコンは同時に両方表示させることはできません。
- ラベルの前は「arrow_left」のみが設定できます。
- ラベルの後は「chevron_right」「arrow_right」「arrow_down」「arrow_up」「new_window」「pdf（file」のみが設定できます。

パターン

スタイル

ボタンにはプライマリ、セカンダリ、ターシャリの3つのスタイルがあります。プライマリは最も重要であることを示し、ユーザーにほかのボタンと差を出すために利用するものです。基本はセカンダリを使用します。セカンダリは一画面に複数個利用することができます。ターシャリは画面上に既にセカンダリかプライマリのボタンが使用されている場合に、キャンセルなどの副次的選択肢として利用します。

<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button c-button--sizeM c-button--primary">
    <span class="c-button__label">プライマリ</span>
  </a>
  <a href="/" class="c-button c-button--sizeM">
    <span class="c-button__label">セカンダリ</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--sizeM c-button--tertiary">
    <svg class="c-button__icon c-button__icon--left icon" aria-hidden="true" role="img" >
      <use xlink:href="/assets/img/sprite.svg#arrow_left"></use>
    </svg>
    <span class="c-button__label">ターシャリ</span>
  </a>
</div>

スタイルの組み合わせ

特にユーザーの行動を促したい（Call to action）部分で使用するボタンには、プライマリのボタンを使用できます。その特性上、基本的に一領域に1つのみ使用します。セカンダリか、ターシャリと組み合わせて使用することも可能です。

<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button c-button--sizeM">
    <span class="c-button__label">セカンダリ</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--sizeM c-button--primary">
    <span class="c-button__label">プライマリ</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
</div>
<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button c-button--sizeM c-button--primary">
    <span class="c-button__label">プライマリ</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--sizeM c-button--tertiary">
    <span class="c-button__label">ターシャリ</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
</div>

「戻る」や「キャンセル」など副次的なアクションに使用します。プライマリやセカンダリボタンと併用する場合、優先すべきアクションに応じて適切に設定してください。

<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button c-button--sizeM c-button--tertiary">
    <svg class="c-button__icon c-button__icon--left icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#arrow_left"></use>
    </svg>
    <span class="c-button__label">ターシャリ</span>
  </a>
  <a href="/" class="c-button c-button--sizeM">
    <span class="c-button__label">セカンダリ</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--sizeM c-button--primary">
    <span class="c-button__label">プライマリ</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
</div>

HTMLタグ

ボタンは<a>または<button>タグを使用します。リンクの場合は<a>タグを使用し、ボタンの場合は<button>タグを使用します。

<div class="c-buttonGroup">
  <a href="/" class="c-button">
    <span class="c-button__label">ボタン</span>
  </a>
  <button class="c-button">
    <span class="c-button__label">ボタン</span>
  </button>
</div>

ボタン幅

ボタンの横幅の変更が可能です。

XL

<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button c-button--sizeXL">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--sizeXL">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="ファイルを開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#pdf"></use>
    </svg>
  </a>
  <a href="/" target="_blank" class="c-button c-button--sizeXL">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="新しいウインドウで開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#new_window"></use>
    </svg>
  </a>
</div>

L

<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button c-button--sizeL">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--sizeL">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="ファイルを開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#pdf"></use>
    </svg>
  </a>
  <a href="/" target="_blank" class="c-button c-button--sizeL">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="新しいウインドウで開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#new_window"></use>
    </svg>
  </a>
</div>

M

<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button c-button--sizeM">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--sizeM">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="ファイルを開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#pdf"></use>
    </svg>
  </a>
  <a href="/" target="_blank" class="c-button c-button--sizeM">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="新しいウインドウで開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#new_window"></use>
    </svg>
  </a>
</div>

S

<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button c-button--sizeS">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--sizeS">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="ファイルを開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#pdf"></use>
    </svg>
  </a>
  <a href="/" target="_blank" class="c-button c-button--sizeS">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="新しいウインドウで開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#new_window"></use>
    </svg>
  </a>
</div>

XS

<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button c-button--sizeXS">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--sizeXS">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="ファイルを開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#pdf"></use>
    </svg>
  </a>
  <a href="/" target="_blank" class="c-button c-button--sizeXS">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-label="新しいウインドウで開く" role="img">
      <use xlink:href="/assets/img/sprite.svg#new_window"></use>
    </svg>
  </a>
</div>

高さ・文字・アイコンサイズ

高さ・文字・アイコンサイズの変更が可能です。

<div class="c-buttonGroup">
  <a href="/" class="c-button c-button--scaleL">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--scaleM">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--scaleS">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--scaleXS">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button c-button--scaleXXS">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
</div>

縦積み/横並び

デフォルトは縦積みとなり、.c-buttonGroup--horizontalを付与することで横並びにできます。

<div class="c-buttonGroup">
  <a href="/" class="c-button">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
</div>
<div class="c-buttonGroup c-buttonGroup--horizontal">
  <a href="/" class="c-button">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
  <a href="/" class="c-button">
    <span class="c-button__label">ボタン</span>
    <svg class="c-button__icon c-button__icon--right icon" aria-hidden="true" role="img">
      <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
    </svg>
  </a>
</div>