Gå til sidens indhold

Komponenter

Knapper

Retningslinjer

Tilgængelighed

  • Knapper markeres tydeligt med en focus-tilstand, når brugere vha 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”.

Brugervenlighed

Anvendes til

Du kan bruge knapper til at anvise centrale funktioner til brugerne som fx ”Gem”, ”Hent”, ”Log ind” og ”Log af”.

Anvendes ikke til

Brug ikke knapper til at navigere mellem sidevisninger. Der skal du i stedet anvende link.

Vejledning

  • Generelt skal du anvende primære knapper til handlinger, der bringer brugeren videre i sit forløb og sekundære knapper til handlinger, der foregår indenfor den aktuelle sidevisning.
  • Der er kun en primærknap pr side.
  • Undgå for mange knapbaserede funktioner på samme side.
  • Brug stort forbogstav og små bogstaver for resten af teksten på knappen.
  • Skriv kort og præcist.
  • Skriv i aktiv form: I stedet for at skrive ”Fejlindmelding” bør du skrive ”Indmeld en fejl”.
  • I nogle tilfælde kan det være meningsunderstøttende at indlejre et svg-ikon i knappen for at signalere bestemte handlinger som fx ”Gem”.
  • Funktioner af mindre vigtighed bør du style som link.

Retningslinjer for vedhæft fil

Vedhæft fil er et inputfelt. For mere information se under Formular-elementer.

Primærknap

<div class="container py-8">

    <button class="button button-primary"> Default </button>

    <button class="button button-primary button-hover"> Hover </button>

    <button class="button button-primary button-active"> Active </button>

    <button class="button button-primary focus"> Focus </button>

    <button class="button button-primary" disabled tab-index="-1"
        aria-disabled="true"> Disabled </button>

</div>

Sekundærknapper

<div class="container py-8">

    <button class="button button-secondary"> Default </button>

    <button class="button button-secondary button-hover"> Hover </button>

    <button class="button button-secondary button-active"> Active </button>

    <button class="button button-secondary focus"> Focus </button>

    <button class="button button-secondary" disabled tab-index="-1"
        aria-disabled="true"> Disabled </button>

</div>

Tertiærknapper

<div class="container py-8">

    <button class="button button-tertiary"> Default </button>

    <button class="button button-tertiary button-hover"> Hover </button>

    <button class="button button-tertiary button-active"> Active </button>

    <button class="button button-tertiary focus"> Focus </button>

    <button class="button button-tertiary" disabled tab-index="-1"
        aria-disabled="true"> Disabled </button>

</div>

Tilbage-knap

<div class="container py-8">

    <button class="button button-quaternary">
        <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#menu-left"></use></svg>
        Default </button>

    <button class="button button-quaternary button-hover">
        <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#menu-left"></use></svg>
        Hover </button>

    <button class="button button-quaternary button-active">
        <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#menu-left"></use></svg>
        Active </button>

    <button class="button button-quaternary focus">
        <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#menu-left"></use></svg>
        Focus </button>

    <button class="button button-quaternary" disabled tab-index="-1"
        aria-disabled="true">
        <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#menu-left"></use></svg>
        Disabled </button>

</div>

button button-quaternary bruges kun som Tilbage link - husk ikonet.

Knap med ikon

<div class="container py-8">

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

</div>

Ikon som knap

<div class="container py-8">

    <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>

</div>

button button-unstyled bruges i de fæ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>.

Vedhæft fil

<div class="container py-8">

    <div class="form-group">
        <label class="form-label" for="fileinput1">Vælg fil</label>
        <input type="file" id="fileinput1" name="file" />
    </div>
</div>

Vedhæft fil er et inputfelt. For mere information se under Formular-elementer.