Knapp
Knapp (Button) används för att utföra en handling eller exekvera en funktion.
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.