Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Knapper (Buttons)

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<button class="button button-primary">
    Gem
</button>
  • Undgå at anvende div eller img tags til at konstruere en knap, da skærmlæsere i givet fald ikke automatisk kan afkode knappens funktionalitet.
  • Styler du et link, så det ligner en knap, skal du være opmærksom på, at der skal tilføjes attributten role="button"

Varianter

Primær

Defineres med klassen button-primary.

Bemærk særlige retningslinjer for primær knap.

Sekundær

Defineres med klassen button-secondary.

Tertiær

Defineres med klassen button-tertiary.

Tilbage-knap

Defineres med klassen button-quaternary.

Knap med ikon

Kodeeksempel
<button class="button button-primary">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#refresh"></use></svg>
    Refresh
</button>

Klikbart ikon

Kodeeksempel
<button class="button button-unstyled">
    <svg class="icon-svg mr-0 mt-0" focusable="false" aria-hidden="true"><use xlink:href="#trash-can"></use></svg>
    <span class="sr-only">Slet</span>
</button>

button-unstyled bruges i de tilfælde, hvor knappen kun indeholder et ikon. For at gøre knappen tilgængelig husk da at tilføje tekst til skærmlæsere. Fx <span class="sr-only">Slet</span>.