Mozaic

Accessibility and semantic

Alway wrap your label into a span.mc-button__label tag

Use aria-label="button purpose" using only an icon without text.

<button
  type="button"
  class="mc-button mc-button--icon-only mc-button--icon-medium-m"
  aria-label="my button purpose"
>
  <!-- Your icon html tag -->
</button>

Use the right tag for the right purpose :
<a> for links
<button type="submit" form="form_id"> to submit a form (you should prefer it to input type submit)
<button> for any other actions

Viewport: px

<div class="example">
  <a href="#" class="mc-button">
    <span class="mc-button__label">
      a tag
    </span>
  </a>
  <button class="mc-button">
    <span class="mc-button__label">
      button tag
    </span>
  </button>
  <button type="submit" form="form_id" class="mc-button">
    <span class="mc-button__label">
      button type submit tag
    </span>
  </button>
</div>

Buttons

Accessibility and semantic