Standard

Blå knapp brukes som standard knapp i for eksempel skjema. Grå knapp brukes bare som "avbryt-knapp" i skjema. Outline-knapp er en mindre fremhevet knapp, for eksempel som "endre" i skjema.
<button class="btn">Button</button>
<button class="btn btn--negative">Button</button>
<button class="btn btn--positive">Button</button>

Subtle

<button class="btn btn--subtle">Standard</button>
<button class="btn btn--negative btn--subtle">Negative</button>
<button class="btn btn--positive btn--subtle">Positive</button>

Small

<button class="btn btn--small">Standard</button>
<button class="btn btn--negative btn--small">Negative</button>
<button class="btn btn--positive btn--small">Positive</button>
<button class="btn btn--success btn--small">Success</button>

With icon

<button class="btn btn--icon">
    <!-- Icon svg -->
</button>
<button class="btn btn--negative btn--icon">
    <!-- Icon svg -->
</button>
<button class="btn btn--positive btn--icon">
    <!-- Icon svg -->
</button>