#button.style-guide__subsection

  %h3= link_to_style_guide('components', 'button')

  %p Displays an element as interactive button.

  %p should work with <code>button[type=button]</code> elements:
  .style-guide__example-block
    = button_tag 'Button', class: 'button', type: 'button'
    = button_tag 'Button', class: 'button button--solid', type: 'button'

  %p should work with <code>button[type=submit]</code> elements:
  .style-guide__example-block
    = button_tag 'Button', class: 'button', type: 'submit'
    = button_tag 'Button', class: 'button button--solid', type: 'submit'

  %p should work with <code>input[type=submit]</code> elements:
  .style-guide__example-block
    = submit_tag 'Button', class: 'button'
    = submit_tag 'Button', class: 'button button--solid'

  %p should work with <code>a</code> elements:
  .style-guide__example-block
    = link_to 'Button', '#', class: 'button'
    = link_to 'Button', '#', class: 'button button--solid'

  %p should style non-interactive buttons wrapped in an <code>a</code> element:
  .style-guide__example-block
    = link_to '#' do
      %span.button Span Button
    = link_to '#' do
      %span.button.button--solid Span Button

#button--small.style-guide__subsection

  %h3= link_to_style_guide('components', 'button__small')

  %p should reduce the size of the button:
  .style-guide__example-block
    = button_tag 'Button Element', class: 'button button--small'
    = button_tag 'Button Element', class: 'button button--solid button--small'

#button--large.style-guide__subsection

  %h3= link_to_style_guide('components', 'button__large')

  %p should increase the size of the button:
  .style-guide__example-block
    = button_tag 'Button Element', class: 'button button--large'
    = button_tag 'Button Element', class: 'button button--solid button--large'

#button--extra-large.style-guide__subsection

  %h3= link_to_style_guide('components', 'button__extra-large')

  %p should further increase the size of the button, intended for use in content blocks only!
  .style-guide__example-block
    = button_tag 'Button Element', class: 'button button--extra-large'
    = button_tag 'Button Element', class: 'button button--solid button--extra-large'

#button--full.style-guide__subsection

  %h3= link_to_style_guide('components', 'button__full')

  %p Should make the button the full width of it's parent
  .style-guide__example-block
    = button_tag 'Button Element', class: 'button button--full'
    = button_tag 'Button Element', class: 'button button--solid button--full'

#button--disabled.style-guide__subsection

  %h3= link_to_style_guide('components', 'button__disabled')

  %p should have a disabled state for the button:
  .style-guide__example-block
    = button_tag 'Button Element', class: 'button', disabled: true
    = button_tag 'Button Element', class: 'button button--solid', disabled: true

  .style-guide__example-block
    = button_tag 'Button Element', class: 'button button--small', disabled: true
    = button_tag 'Button Element', class: 'button button--solid button--small', disabled: true

  .style-guide__example-block
    = button_tag 'Button Element', class: 'button button--large', disabled: true
    = button_tag 'Button Element', class: 'button button--solid button--large', disabled: true

  .style-guide__example-block
    = button_tag 'Button Element', class: 'button button--extra-large', disabled: true
    = button_tag 'Button Element', class: 'button button--solid button--extra-large', disabled: true