<!-- Primärer Button -->
<a class="button button--primary" href="#" value="test"><span class="button__text">Button-Text</span></a>

{
  "text": "Button-Text",
  "style": "primary",
  "link": "#",
  "value": "test"
}

<!-- Primärer Button (deaktiviert) -->
<button class="button button--primary" type="button" disabled="disabled"><span class="button__text">Button-Text</span></button>

{
  "text": "Button-Text",
  "style": "primary",
  "disabled": true
}

<!-- Primärer Button mit Icon -->
<button class="button button--primary" type="button">
  <svg class="icon icon--plus button__icon" viewBox="0 0 200 200" role="presentation">
    <use xlink:href="#icon-plus"></use>
  </svg><span class="button__text">Button-Text</span></button>

{
  "text": "Button-Text",
  "style": "primary",
  "icon": "plus"
}

<!-- Primärer CTA-Button -->
<a class="button button--primary button--cta" href="#"><span class="button__text">Button-Text</span></a>

{
  "text": "Button-Text",
  "style": "primary",
  "link": "#",
  "cta": true
}

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

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

<!-- Sekundärer Button (deaktiviert) -->
<button class="button button--secondary" type="button" disabled="disabled"><span class="button__text">Button-Text</span></button>

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