Button

<a class="mk-btn mk-btn--primary" href="#">Get started</a>

content: Get started
href: #
variant: primary

<a class="mk-btn" href="#">View examples</a>

content: View examples
href: #
variant: outline

<a class="mk-btn mk-btn--naked" href="#">Cancel</a>

content: Cancel
href: #
variant: naked

<a class="mk-btn mk-btn--inverse" href="#">Book now</a>

content: Book now
href: #
variant: inverse

<a class="mk-btn mk-btn--sm" href="#">Add to list</a>

content: Add to list
href: #
variant: outline
size: sm

<a class="mk-btn mk-btn--primary mk-btn--lg" href="#">Apply now</a>

content: Apply now
href: #
variant: primary
size: lg

<a class="mk-btn" href="#">
  <i class="bi bi-download"></i>
  Download
</a>

content: <i class="bi bi-download"></i>Download
href: #
variant: outline

<a class="mk-btn mk-btn--primary" href="#">
  Continue
  <i class="bi bi-arrow-right"></i>
</a>

content: Continue<i class="bi bi-arrow-right"></i>
href: #
variant: primary

<button class="mk-btn" type="button" disabled>Unavailable</button>

content: Unavailable
variant: outline
disabled: true