include ./helpers
h1.example__header Buttons

.row
  .column--quarter
    .header--small Main Buttons
    ul
      li Default Button
      li Green Button
      li Gray Button
  .column--three-quarter
    label.label Code Example
    +codeExample("html").
      <div>
        <button class="button">Default</button>
        <button class="button--green">Green</button>
        <button class="button--gray">Gray</button>
      </div>
    label.label Result
    div
      button.button Default
      button.button--green Green
      button.button--gray Gray

br
.row
  .column--quarter
    .header--small State Buttons
    ul
      li Disabled Button
  .column--three-quarter
    label.label Code Example
    +codeExample("html").
      <div>
        <button disabled class="button">Default</button>
        <button disabled class="button--green">Green</button>
        <button disabled class="button--gray">Gray</button>
      </div>
    label.label Result
    div
      button.button(disabled) Default
      button.button--green(disabled) Green
      button.button--gray(disabled) Gray