{{#> web/layout/default title="Button" parentPageName="Components" }}

{{setVar "colors" "primary" "secondary" "tertiary" "plain" "success" "informative" "warning" "danger" }}
{{setVar "sizes" "small" "medium" "large" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--desktop--cols-3">
        {{#each @root.sizes as |size|}}
        <section class="UNSTABLE_Section">
          <h2 class="docs-Heading">Size {{size}}</h2>
          <div class="docs-Stack docs-Stack--start">
            {{#each @root.colors as |color|}}
            <div>
              <a href="#" class="Button Button--{{color}} Button--{{size}}">Button {{color}}</a>
              <button type="button" class="Button Button--{{color}} Button--{{size}}">
                <svg class="mr-400" width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
                </svg>
                Menu
              </button>
              <button type="button" class="Button Button--{{color}} Button--{{size}} Button--symmetrical">
                <span class="accessibility-hidden">Menu</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
                </svg>
              </button>
            </div>
            {{/each}}
          </div>
        </section>
        {{/each}}
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Disabled</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
        {{#each @root.sizes as |size|}}
        <section class="UNSTABLE_Section">
          <h2 class="docs-Heading">Size {{size}}</h2>
          <div class="docs-Stack docs-Stack--start">
            {{#each @root.colors as |color|}}
            <div>
              <button type="button" class="Button Button--{{color}} Button--{{size}}" disabled>Button {{color}}</button>
              <button type="button" class="Button Button--{{color}} Button--{{size}}" disabled>
                <svg class="mr-400" width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
                </svg>
                Menu
              </button>
              <button type="button" class="Button Button--{{color}} Button--{{size}} Button--symmetrical" disabled>
                <span class="accessibility-hidden">Menu</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
                </svg>
              </button>
            </div>
            {{/each}}
          </div>
        </section>
        {{/each}}
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Loading</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--desktop--cols-3">
        {{#each @root.sizes as |size|}}
        <section class="UNSTABLE_Section">
          <h2 class="docs-Heading">Size {{size}}</h2>
          <div class="docs-Stack docs-Stack--start">
            {{#each @root.colors as |color|}}
            <div>
              <a href="#" class="Button Button--{{color}} Button--{{size}} Button--loading Button--disabled">
                Button {{color}}
                <svg width="24" height="24" aria-hidden="true" class="animation-spin-clockwise">
                  <use xlink:href="/assets/icons/svg/sprite.svg#spinner" />
                </svg>
              </a>
              <button type="button" class="Button Button--{{color}} Button--{{size}} Button--loading" disabled>
                <svg class="mr-400" width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
                </svg>
                Menu
                <svg width="24" height="24" aria-hidden="true" class="animation-spin-clockwise">
                  <use xlink:href="/assets/icons/svg/sprite.svg#spinner" />
                </svg>
              </button>
              <button type="button" class="Button Button--{{color}} Button--{{size}} Button--symmetrical Button--loading" disabled>
                <span class="accessibility-hidden">Menu</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
                </svg>
                <svg width="24" height="24" aria-hidden="true" class="animation-spin-clockwise">
                  <use xlink:href="/assets/icons/svg/sprite.svg#spinner" />
                </svg>
              </button>
            </div>
            {{/each}}
          </div>
        </section>
        {{/each}}
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}