アイコンボタン／Icon button

アイコンボタンを表示するためのコンポーネントです。
アイコン、2桁の数列、2文字の英字文字を利用し、ユーザーに行為を誘導したい際（シグニファイア）に利用します。

<div class="c-iconButtonGroup">
  <div class="c-iconButtonGroup__item">
    <a href="/" class="c-iconButton">
      <svg class="c-iconButton__icon icon" aria-label="トップに戻る" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </a>
  </div>
</div>

原則

Token > アイコンで定義された基本アイコンを利用します。
アイコンの代わりに2桁までの数字、2文字まで英字が設定できます。
小さいサイズのボタンに対しては、クリッカブルエリアが最低44pxを保つように使用します。
組み合わせて他のコンポーネントを作成する際のパーツとして使用します。

パターン

スタイル

ボタンスタイルの変更が可能です。

Circle - No outline

<div class="c-iconButtonGroup">
  <div class="c-iconButtonGroup__item">
    <a href="/" class="c-iconButton c-iconButton--noBorder">
      <svg class="c-iconButton__icon icon" aria-label="トップに戻る" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </a>
  </div>
</div>

Square

<div class="c-iconButtonGroup">
  <div class="c-iconButtonGroup__item">
    <a href="/" class="c-iconButton c-iconButton--square">
      <svg class="c-iconButton__icon icon" aria-label="トップに戻る" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </a>
  </div>
</div>

Square - No outline

<div class="c-iconButtonGroup">
  <div class="c-iconButtonGroup__item">
    <a href="/" class="c-iconButton c-iconButton--square c-iconButton--noBorder">
      <svg class="c-iconButton__icon icon" aria-label="トップに戻る" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </a>
  </div>
</div>

HTMLタグ

アイコンボタンは<button>または<a>タグで使用します。

<div class="c-iconButtonGroup">
  <div class="c-iconButtonGroup__item">
    <button class="c-iconButton">
      <svg class="c-iconButton__icon icon" aria-label="トップに戻る" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </button>
  </div>
  <div class="c-iconButtonGroup__item">
    <a href="/" class="c-iconButton">
      <svg class="c-iconButton__icon icon" aria-label="トップに戻る" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </a>
  </div>
</div>

サイズ

ボタンサイズの変更が可能です。

<div class="c-iconButtonGroup">
  <div class="c-iconButtonGroup__item">
    <a href="/" class="c-iconButton">
      <svg class="c-iconButton__icon icon" aria-label="トップに戻る" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </a>
  </div>
  <div class="c-iconButtonGroup__item">
    <a href="/" class="c-iconButton c-iconButton--sizeM">
      <svg class="c-iconButton__icon icon" aria-label="トップに戻る" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </a>
  </div>
  <div class="c-iconButtonGroup__item">
    <a href="/" class="c-iconButton c-iconButton--sizeS">
      <svg class="c-iconButton__icon icon" aria-label="トップに戻る" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </a>
  </div>
</div>

縦積み/横並び

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

<div class="c-iconButtonGroup c-iconButtonGroup--horizontal">
  <div class="c-iconButtonGroup__item">
    <button class="c-iconButton c-iconButton--sizeM c-iconButton--square">
      <svg class="c-iconButton__icon icon" aria-label="下げる" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_down"></use>
      </svg>
    </button>
  </div>
  <div class="c-iconButtonGroup__item">
    <button class="c-iconButton c-iconButton--sizeM c-iconButton--square">
      <svg class="c-iconButton__icon icon" aria-label="上げる" role="img">
        <use xlink:href="/assets/img/sprite.svg#arrow_up"></use>
      </svg>
    </button>
  </div>
</div>