{% call SGBuilder.SGSection({ title: 'Buttons component', id: 'Buttons' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Buttons default</h3>
      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button--lg',
          text: 'button lg'
        }) }}
        {{ Button({
          className: 'button--lg',
          text: 'button lg',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--lg',
          text: 'button lg',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
        {{ Button({
          className: 'button--icon button--lg',
          text: '',
          iconBefore: ['info'],
          attrs: {
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
        {{ Button({
          className: 'button--icon button--lg',
          text: '',
          iconBefore: ['delete'],
          attrs: {
            disabled: 'disabled',
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
      {% endcall %}

      {% call SGBuilder.SGRow() %}
        {{ Button({
          text: 'button'
        }) }}
        {{ Button({
          text: 'button',
          iconBefore: ['info']
        }) }}
        {{ Button({
          text: 'button',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
        {{ Button({
          className: 'button--icon',
          text: '',
          iconBefore: ['info'],
          attrs: {
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
        {{ Button({
          className: 'button--icon',
          text: '',
          iconBefore: ['delete'],
          attrs: {
            disabled: 'disabled',
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
      {% endcall %}

      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button--sm',
          text: 'button sm'
        }) }}
        {{ Button({
          className: 'button--sm',
          text: 'button sm',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--sm',
          text: 'button sm',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
        {{ Button({
          className: 'button--icon button--sm',
          text: '',
          iconBefore: ['info'],
          attrs: {
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
        {{ Button({
          className: 'button--icon button--sm',
          text: '',
          iconBefore: ['delete'],
          attrs: {
            disabled: 'disabled',
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Primary Buttons</h3>
      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button--primary',
          text: 'button'
        }) }}
        {{ Button({
          className: 'button--primary',
          text: 'button',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--primary',
          text: 'button',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
        {{ Button({
          className: 'button--primary button--icon',
          text: '',
          iconBefore: ['delete'],
          attrs: {
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
        {{ Button({
          className: 'button--primary button--icon',
          text: '',
          iconBefore: ['info'],
          attrs: {
            disabled: 'disabled',
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
      {% endcall %}
    {% endcall %}


    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Primary Outline Buttons</h3>

      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button--primary-outline',
          text: 'button'
        }) }}
        {{ Button({
          className: 'button--primary-outline',
          text: 'button',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--primary-outline',
          text: 'button',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
        {{ Button({
          className: 'button--primary-outline button--icon',
          text: '',
          iconBefore: ['info'],
          attrs: {
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
        {{ Button({
          className: 'button--primary-outline button--icon',
          text: '',
          iconBefore: ['delete'],
          attrs: {
            disabled: 'disabled',
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Red Buttons</h3>

      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button--red',
          text: 'button'
        }) }}
        {{ Button({
          className: 'button--red',
          text: 'button',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--red',
          text: 'button',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
        {{ Button({
          className: 'button--red button--icon',
          text: '',
          iconBefore: ['info'],
          attrs: {
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
        {{ Button({
          className: 'button--red button--icon',
          text: '',
          iconBefore: ['delete'],
          attrs: {
            disabled: 'disabled',
            'aria-label': 'DEFAULT LABEL'
          }
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 12 }) %}
      <h3>Examples Buttons</h3>
      {% call SGBuilder.SGRow() %}
        {{ Button({
          text: 'Signin with Google',
          iconBefore: ['globe']
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Link</h3>
      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button--lg',
          href: '#',
          text: 'link'
        }) }}
        {{ Button({
          className: 'button--lg',
          text: 'link',
          href: '#',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--lg button--disabled',
          text: 'link',
          href: '#',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
      {% endcall %}
      {% call SGBuilder.SGRow() %}
        {{ Button({
          text: 'link',
          href: '#'
        }) }}
        {{ Button({
          text: 'link',
          href: '#',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--disabled',
          text: 'link',
          href: '#',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
      {% endcall %}
      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button--sm',
          text: 'link',
          href: '#',
          text: 'link'
        }) }}
        {{ Button({
          className: 'button--sm',
          text: 'link',
          href: '#',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--sm button--disabled',
          text: 'link',
          href: '#',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Primary Link</h3>
      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button--primary',
          href: '#',
          text: 'link'
        }) }}
        {{ Button({
          className: 'button--primary',
          text: 'link',
          href: '#',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--primary',
          text: 'link',
          href: '#',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
      {% endcall %}
      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button--red',
          text: 'link',
          href: '#'
        }) }}
        {{ Button({
          className: 'button--red',
          text: 'link',
          href: '#',
          iconBefore: ['info']
        }) }}
        {{ Button({
          className: 'button--red',
          text: 'link',
          href: '#',
          iconBefore: ['info'],
          iconAfter: ['delete']
        }) }}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}