Exempel
Designspecifikation
Det finns två varianter av knappar: primära och sekundära. De två varianterna kan användas för att vikta knappvalen mot varandra. Den primära används t.ex. för det valet som är vanligast eller du helst vill att användaren ska klicka på.
Knappar är rundade och har text i versaler. Primär knapp har fylld blå bakgrund, medan sekundär knapp har vit bakgrund och blå ramlinje.
Padding mellan text och knappens höger-/vänsterkant: 30 px
Undantag: Sök-knapp
Sök-knapp = knapp som ligger i anslutning till ett sökfält är fyrkantig med 10 px rundade hörn. Se: Sökfält - 1177
Placering
Spacing mellan knappar är primärt 20 px. Primär knapp placeras till höger om sekundär knapp. Knappar kan placeras centrerade gruppvis eller högerjusterat.
Mobil
Knappar i mobil har per default fast bredd och visas stackade efter varandra med 20 px avstånd. I vissa fall kan kapparna dock placeras horisontellt bredvid varandra, om kontexten kräver det och om knapparna har kort text.
Exempel: knappar i modal - desktop
Exempel: knappar i modal - mobil
Button link
Knappar som länkar till en annan sida, istället för att utföra en funktion, kallas för Button link. Den ser ut exakt likadan ut som vanliga knappar, men har bara ett annat beteende.
Do’s and Don’ts
Do
Skriv knapptexter i VERSALER då det förstärker knappens utseende. Det är medvetet val och skall inte kopplas till eventuella skrivregler där man ofta undviker versaler då ordbilden i versalskrivna ord blir sämre.
Don’t
Undvik knappar med många ord, se gärna avsnitt om Copy. I vissa sammanhang till exempel på 1177.se startsida så kan en puff ha en knapp med många ord men i ett interaktiv gränssnitt bör knappen i första hand bestå av verb, i andra hand verb+substantiv om substantivet behövs för att särskilja flera liknande knappar.
Tillgänglighet
Knappen som är i fokus behövs markeras tydligt och här är det viktigt att tänka på kontrastvärden med färger som väljs att användas. Detta är för att användare ska tydligt kunna se vilken knapp som är i fokus, det finns användare som navigerar sig med tangentbord för att komma åt innehåll.
För användare som inte kan se knapparna är det viktigt att man inte döljer information. Med användning av aria-disabled kan man indikera att knappar är inaktiverade så att användare med skärmläsare får till sig den informationen.
En guide med videoexempel kring aria-disabled finnas att se här: https://a11y-101.com/development/aria-disabled
Research på komponenten
-
Relaterade resurser/komponenter
Status
Status | FÄRDIG VALIDERAD |
---|---|
Publicerad | 2020-01-18 |
Senast uppdaterad | 2020-01-20 |