## Category

## Tag

## All Colors

## button

/src/assets2/scss/_components.scss

- button

work with both a and button tags

button:a element

    <p>
      <a class="CG2-button" href="#">button:a element</a>
    </p>
    <p>
      <button class="CG2-button" href="#">button: button element</button>
    </p>

with an icon

button

    <p>
      <a class="CG2-button" href="#"><span class="CG2-icon-pxg"></span>button</a>
    </p>

use for Primary, Action, Setting

button

button

button

    <p>
      <a class="CG2-button CG2-button--primary" href="#">button</a>
    </p>
    <p>
      <a class="CG2-button CG2-button--action" href="#">button</a>
    </p>
    <p>
      <a class="CG2-button CG2-button--setting" href="#">button</a>
    </p>

sizes

button

button

button

    <p>
      <a class="CG2-button CG2-button--thin" href="#">button</a>
    </p>
    <p>
      <a class="CG2-button CG2-button--large" href="#">button</a>
    </p>
    <p>
      <a class="CG2-button CG2-button--fullWidth" href="#">button</a>
    </p>

disabled `button`の時は`disabled`属性を明示、 それ以外(`a`など)の場合は、`aria-disabled="true"`を明示

button

primary button

action button

setting button

    <p>
      <a class="CG2-button" aria-disabled="true" href="#">button</a>
    </p>
    <p>
      <a class="CG2-button CG2-button--primary" aria-disabled="true" href="#">primary button</a>
    </p>
    <p>
      <a class="CG2-button CG2-button--action" aria-disabled="true" href="#">action button</a>
    </p>
    <p>
      <a class="CG2-button CG2-button--setting" aria-disabled="true" href="#">setting button</a>
    </p>

progress

button

    <p>
      <a class="CG2-button CG2-button--progress" href="#">button</a>
    </p>

## transparentButton

/src/assets2/scss/_components.scss

- button

work with both a and button tags

button:a element

    <div style="background: rgba( 0, 0, 0, 0.5 );">
      <p>
        <a class="CG2-transparentButton" href="#">button:a element</a>
      </p>
      <p>
        <button class="CG2-transparentButton" href="#">button: button element</button>
      </p>
    </div>

disabled

button

    <div style="background: rgba( 0, 0, 0, 0.5 );">
      <p>
        <a class="CG2-transparentButton" aria-disabled="true" href="#">button</a>
      </p>
      <p>
        <button class="CG2-transparentButton" disabled href="#">button</button>
      </p>
    </div>

fav

.CG2-transparentButton__favText内にテキストを入れて管理する

    <div style="background: rgba( 0, 0, 0, 0.5 );">
      <p>
        <button class="CG2-transparentButton"><span class="CG2-icon-star"></span><span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span></button>
      </p>
      <p>
        <button class="CG2-transparentButton CG2-transparentButton--favAdded"><span class="CG2-icon-star"></span><span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span></button>
      </p>
    </div>

## buttonContainer

/src/assets2/scss/_components.scss

- button

- button 1
- button 2

    <div class="CG2-buttonContainer">
      <ul>
        <li><a class="CG2-button CG2-button--primary" href="#">button 1</a></li>
        <li><a class="CG2-button" href="#">button 2</a></li>
      </ul>
    </div>

左寄せ

- button 1
- button 2

    <div class="CG2-buttonContainer CG2-buttonContainer--pullLeft">
      <ul>
        <li><a class="CG2-button CG2-button--primary" href="#">button 1</a></li>
        <li><a class="CG2-button" href="#">button 2</a></li>
      </ul>
    </div>

ラージスクリーン時full width

- button 1
- button 2

    <div class="CG2-buttonContainer">
      <ul>
        <li class="CG2-buttonContainer__item--full"><a class="CG2-button CG2-button--primary" href="#">button 1</a></li>
        <li><a class="CG2-button" href="#">button 2</a></li>
      </ul>
    </div>