## Nav-items

## button

/src/assets2/scss/codegrid-ui.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

primary button

action button

setting button

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

progress

button

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

## buttonContainer

/src/assets2/scss/codegrid-ui.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>

## toolButton

/src/assets2/scss/codegrid-ui.scss

- button

    <div style="padding: 10px; background:#000;">  <div class="CG2-toolButton"></div></div>