Knappar

<div class="l-flex-horizontal l-align-middle l-gap-060">
  <button type="button" class="c-primary-btn--medium">Medium</button>
  <button type="button" class="c-primary-btn--compact">Kompakt</button>
  <button type="button" class="c-primary-btn--small">Small</button>
</div>

<div class="l-flex-horizontal l-align-middle l-gap-060">
  <button type="button" class="c-btn--medium">Medium</button>
  <button type="button" class="c-btn--compact">Kompakt</button>
  <button type="button" class="c-btn--small">Small</button>
</div>

<div class="l-flex-horizontal l-align-middle l-gap-060">
  <button type="button" class="c-primary-btn--medium"><span class="sjv-i-redigera"></span>Primär</button>
  <button type="button" class="c-primary-btn--medium" aria-label="redigera"><span class="sjv-i-redigera"></span></button>
  <button type="button" class="c-btn--medium"><span class="sjv-i-redigera"></span>Sekundär</button>
  <button type="button" class="c-btn--medium" aria-label="redigera"><span class="sjv-i-redigera"></span></button>
</div>

<div class="l-flex-horizontal l-align-middle l-gap-060">
  <button type="button" class="c-primary-btn--medium" disabled="">Inaktiv primär</button>
  <button type="button" class="c-btn--medium" disabled="">Inaktiv sekundär</button>
</div>

<div class="l-flex-horizontal l-align-middle l-gap-060">
  <button type="button" aria-label="Stäng" class="c-btn--medium">X</button>
</div>

<div class="exempel-dark_background">
  <div class="l-flex-horizontal l-align-middle l-gap-060">
    <button type="button" class="c-primary-btn--medium c-btn-primary--dark">Medium</button>

    <button type="button" class="c-primary-btn--compact c-btn-primary--dark">Kompakt</button>

    <button type="button" class="c-primary-btn--small c-btn-primary--dark">Small</button>
  </div>
</div>

<div class="exempel-dark_background l-flex-horizontal l-align-middle l-gap-060">
  <button type="button" class="c-btn--medium c-btn--dark">Medium</button>
  <button type="button" class="c-btn--compact c-btn--dark">Kompakt</button>
  <button type="button" class="c-btn--small c-btn--dark">Small</button>
</div>

<div class="exempel-dark_background l-flex-horizontal l-align-middle l-gap-060">
  <button type="button" class="c-primary-btn--medium c-btn-primary--dark" disabled="">Inaktiv primär</button>

  <button type="button" class="c-btn--medium c-btn--dark" disabled="">Inaktiv sekundär</button>
</div>

<div class="exempel-light_background">
  <button type="button" class="c-primary-btn--medium c-btn--maxwidth">Medium</button>
  <button type="button" class="c-btn--medium c-btn--maxwidth">Medium</button>
</div>
<div class="exempel-dark_background">
  <button type="button" class="c-primary-btn--medium c-btn-primary--dark c-btn--maxwidth">Medium</button>
  <button type="button" class="c-btn--medium c-btn--dark c-btn--maxwidth">Medium</button>
</div>