Gå til sidens indhold

Kode

Knapper

Eksempler og retningslinjer

Installation

HTML Struktur

<button class="button button-primary">
    Gem
</button>
  • Knapper markeres tydeligt med en fokus tilstand, når brugere ved hjælp af tab-tasten navigerer sig frem til dem.
  • 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 skærmlæsere håndterer et link og en knap forskelligt:
    • Et link aktiveres ved at trykke ”Enter”.
    • En knap aktiveres ved at trykke ”Space”.

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

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

Ikon som knap

<button class="button button-unstyled">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#delete-outline"></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>.