<a class="button button--primary" href="#"><span class="button__text">Button-Text</span></a>

{
  "text": "Button-Text",
  "link": "#"
}

<a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
    <use xlink:href="#icon-arrow-right"></use>
  </svg><span class="button__text">Button-Text</span></a>

{
  "text": "Button-Text",
  "link": "#",
  "icon": "arrow-right"
}

<a class="button button--secondary" href="#"><span class="button__text">Button-Text</span></a>

{
  "text": "Button-Text",
  "link": "#",
  "style": "secondary"
}

<a class="button button--secondary button--transparent" href="#"><span class="button__text">Button-Text</span></a>

{
  "text": "Button-Text",
  "link": "#",
  "style": "secondary",
  "transparent": true
}

<a class="button button--secondary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
    <use xlink:href="#icon-arrow-right"></use>
  </svg><span class="button__text">Button-Text</span></a>

{
  "text": "Button-Text",
  "link": "#",
  "style": "secondary",
  "icon": "arrow-right"
}

<button class="button button--primary" type="button" disabled="disabled"><span class="button__text">Button-Text</span></button>

{
  "text": "Button-Text",
  "link": null,
  "disabled": true
}

<button class="button button--secondary" type="button" disabled="disabled"><span class="button__text">Button-Text</span></button>

{
  "text": "Button-Text",
  "link": null,
  "style": "secondary",
  "disabled": true
}