Knapp

Knapp (Button) används för att utföra en handling eller exekvera en funktion.

Visuella exempel

Ui-kittet

Knapp

Riktlinjer

  • Det ska tydligt framgå att en knapp är klickbar.
  • Det ska vara tydligt för användaren vad som sker vid ett klick på knappen. Knappar kan förekomma i olika utföranden:

    Primär knapp
  • Används alltid om det endast finns en knapp på sidan.
  • Ska alltid vara mest framträdande i relation till andra knappar.
  • Ska placeras så att den är det naturliga förstahandsvalet i interaktionen.


    Sekundär knapp
  • En sekundär knapp får endast användas om det finns mer än en knapp på sidan.
  • En sekundär knapp används för den sekundära interaktionen, som till exempel att avbryta ett flöde, säga nej tack eller liknande.
  • En sekundär knapp får i vissa fall ersättas med en Avbryt-länk, men endast om det gör interaktionen tydligare för användare.

    Funktionsknapp
  • Funktionsknappar ser ut som länkar men används för att utföra en handling, till exempel Rensa eller Ändra.

    Inaktiv knapp
  • Inaktiv knapp ska inte användas. Alla knappar ska alltid gå att interagera med.
  • Om användaren inte kan komma vidare i flödet, kan ett felmeddelande visas när användaren klickar på knappen.


Bra att tänka på

Knappar kan användas med hela längden i mobil och det är möjligt att justera längden på knappar om det ser bättre ut att de är lika breda i de fall de förekommer två eller fler tillsammans.

Tillgänglig komponent

  • En knapp ska alltid kodas som "button".
  • En knapp ska kunna aktiveras med tangenterna Enter och Space.
  • En knapp bör alltid ha synlig text. Om det av platsbrist i mobil inte finns möjlighet att ha text, bör i första hand designen ses över. I andra hand används en tydlig ikon tillsammans med aria-label för att ge knappen ett textalternativ.


Knapp (WAI-ARIA)