Components

Buttons

scss:Readyfigma:Ready
vue
:Ready
react
:Ready
freemarker
:Ready
webComponent
:Ready

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>