Knapper (Buttons)

Sådan bruges komponenten

Anvendes til

Du kan bruge de forskellige typer af knapper til at kommunikere centrale og vigtige funktioner til brugerne, såsom “Næste” trin i en selvbetjeningsløsning, eller ”Gem”, ”Rediger”, ”Log ud” m.fl.

Anvendes ikke til

Brug ikke knapper til at navigere til andre sider. Der skal du i stedet anvende links.

Vejledning

Hierarkisk er der tre typer af knapper, Primær, Sekundær og Tertiær, der bruges til at fremhæve udvalgte handlinger.

Primærknap

Primærknapper anvendes til den centrale handling i brugergrænsefladen. Det kan eksempelvis være “Tilmeld” eller “Indsend”. Der må kun anvendes én primærknap pr. side.

Sekundærknap

Sekundærknapper anvendes til handlinger der ikke er centrale i brugergrænsefladen. Der kan være flere sekundærknapper på en side.

Tertiærknap

Tertiærknapper anvendes til nedtonede handlinger, der ikke er centrale i brugergrænsefladen.

Disabled tilstand

Alle knapper har en “disabled” tilstand, men vi anbefaler ikke at benytte denne, da ikke alle brugere forstår, at det som er “disabled” ikke kan anvendes. Derudover er disabled knapper svære at se og læse grundet lav farvekontrast. Disabled knapper får ikke fokus, hvormed brugere, der navigerer med tastatur og bruger skærmlæser, ikke vil opdage knappen.

Sådan (do)

Sådan: Benyt kun én primærknap pr side.

Ikke sådan (don't)

Ikke sådan: Anvend ikke flere primærknapper på samme side.

Sådan (do)

Sådan: Anvend én knap til hver funktion.

Ikke sådan (don't)

Ikke sådan: En knap må ikke indeholde flere funktioner.

Varianter

Primærknap i fuld bredde på små skærme

På små skærme med kun én central handling kan primærknapper indsættes på siden med fuld bredde. Benyt kun denne variant til primærknapper og kun til små skærmstørrelser (breakpoint mobil).

Knap med ikon

Du kan supplere knappens tekst med et ikon, hvis dette klart og tydeligt angiver knappens funktion.

Knapgruppe

For funktioner, der er sammenhængende, kan knapper grupperes og placeres ved siden af hinanden.

Advarselsknapper

Bør kun anvendes til funktioner hvor brugeren skal forstå, at de er ved at foretage en handling, der ikke efterfølgende kan omgøres, og som kan have store konsekvenser. Eksempelvis “Er du sikker på, du ønsker at slette det indtastede?”

Vær opmærksom på, at den røde farve ikke må være det eneste, der kommunikerer handlingens alvor. Konteksten og knapteksten skal også kommunikere dette, da ikke alle brugere kan se og forstå farven og dens betydning (GOV.UK, WCAG).

Klikbart ikon

Klikbare ikoner bør kun anvendes i tilfælde, hvor ikonet er bredt kendt, og hvor der ikke er plads til supplerende tekstlabel i brugergrænsefladen. Det kan f.eks. være tilfældet med sorteringsikoner i tabeller eller skraldespandsikoner på mobil, hvor pladsen er begrænset.

Ikoner fungerer altid bedst i kombination med tekst. Anvend derfor altid funktionslink i stedet for klikbare ikoner, når det er muligt.

Se komponenten i eksempelløsninger

• Formular til kontaktoplysninger: Kvittering
• Trinformular til registrering: Vælg personer
• Trinformular til ansøgning: Oplysninger om ansøger
• Trinformular til ansøgning: Tilføj dokumentation
• Trinformular til ansøgning: Kvittering
• Sagsoversigt: Sagsnr. 123456789

Referencer

• The Problem with Disabled Buttons and What To Do Instead
• When to Use a Button or Link
• Usability Pitfalls of Disabled Buttons, and How To Avoid Them
• W3C (WCAG 2.1): Understanding SC 1.4.1: Use of Color (Level A)
• GOV.UK Design System - Button

Installation

HTML Struktur

<div class="mb-7">
    <button class="button button-primary">
        Primærknap
    </button>
</div>
<div class="mb-7">
    <button class="button button-secondary">
        Sekundærknap
    </button>
</div>
<div>
    <button class="button button-tertiary">
        Tertiærknap
    </button>
</div>

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.

Alle knapper skal altid have klassen button, der sætter en grundlæggende styling.

Hvis man har knapper med lang tekst, kan der i enkelte tilfælde være ombrydningsproblemer på mindre skærme. Hvis det ikke er muligt at give knappen et kortere navn, kan man placere knappens tekst i et <span>-element for at ombryde teksten over flere linjer.

<button class="button button-primary">
    <span>Sommerferiearrangementskalender</span>
</button>
<button class="button button-secondary">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#calendar-month"></use></svg>
    <span>Sommerferiearrangementskalender</span>
</button>

Primær

Tilføj klassen button-primary til knappen.

Bemærk særlige retningslinjer for primærknap.

Sekundær

Tilføj klassen button-secondary til knappen.

Tertiær

Tilføj klassen button-tertiary til knappen.

Primærknap i fuld bredde på små skærme

<p class="mt-0">Reducér skærmens bredde for at se knappens effekt.</p>
<button class="button button-primary xs-full-width">
    Gem
</button>

Knap med ikon

<button class="button button-primary">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#refresh"></use></svg>
    Genindlæs
</button>

Knapgruppe

<div class="button-group">
    <button class="button button-secondary">
        Gem
    </button>
    <button class="button button-tertiary">
        Fortryd
    </button>
</div>

Advarselsknapper

<button class="button button-warning">
    Slet kladde
</button>

Klikbart ikon

<button class="button button-icon-only">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#delete"></use></svg>
    <span class="sr-only">Slet</span>
</button>