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