Buttons

<button type="button" class="button">Button</button>

<button type="button" class="button"><svg class="button_icon" data-location="before"><use xlink:href="#tick" /></svg> Button</button>

JS

<div class="button-group">
  <label class="button js-button" aria-checked="true">
    <input type="radio" name="options" id="option1" checked> Radio
  </label>
  <label class="button js-button">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="button js-button">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

<label class="button js-button">
  <input type="checkbox"> Toggle
</label>

Template

@mixin buttonVariables
/*  1. bg-color ............. */  var(--button-bg-color),
/*  2. txt-color ............ */  var(--button-txt-color),
/*  3. height ............... */  var(--button-height),
/*  4. font-size ............ */  var(--button-font-size),
/*  5. font-weight .......... */  var(--button-font-weight),
/*  6. font-family .......... */  var(--button-font-family),
/*  7. border-width ......... */  var(--button-border-width),
/*  8. border-radius ........ */  var(--button-border-radius),
/*  9. focus-outline-width .. */  var(--button-focus-outline-width),
/* 10. focus-outline-offset . */  var(--button-focus-outline-offset),
/* 11. focus-outline-opacity  */  var(--button-focus-outline-opacity),
/* 12. focus-outline-blur ... */  var(--button-focus-outline-blur),
/* 13. expand-max ........... */  var(--button-expand-max),
/* 14. shadow ............... */  var(--button-shadow);

@mixin buttonSelectors
/*  1. button ............... */  .button,
/*  2. button icon .......... */  .button_icon,
/*  3. button active modifier */  [aria-pressed="true"];