Knappar Exempel på knappar Användning Primär knapp - används i de flesta fall, till exempel vid spara/redigera/nästa. Kan även kombineras med ikon (se variant) Sekundär knapp - används oftast för att ge användaren möjlighet att avbryta eller stänga utan åtgärd Varningsknapp - Ovanlig. Används i särskilda situationer där det är viktigt att användaren förstår att åtgärden innebär en stor ändring som kan innebära en stor påverkan eller inte går att ändra tillbaka. Om placering Vi lägger knappar till vänster och längst ner under formulär och innehåll som de berör. Ett skäl till detta är för att det ska gå snabbt för ökat att följa en linje i vänsterkant rakt ner till knappen. En knapp som ligger till höger kan vara svårare att hitta när man använder zoom-verktyg. Lägg den primära knappen först, följt av den sekundära knappen (om den används). Om tillgänglighet Använd button för att ange en knapp i koden, och undvik länkar som ser ut som knappar. Koden för button tillför viktiga funktioner avseende tillgänglighet. För att särskilja knappar som heter samma sak på en sida (till exemnpel flera Redigera-knappar) är det viktigt att använda en label som också ger mer information, till exempel vad det är man redigerar med knappen. En skärmläsare kommer annars bara läsa upp "Redigera" flera gånger och användaren kan få svårt att veta vilken knapp som är vilken. Exempel på angivelse av tydlig label : . Om inaktiva knappar Vi undviker helt användning av inaktiva knappar. Beroende på sammanhang är det bättre att inte alls visar en knapp tillåta att man använder knappen men får ett felmeddelande tillåta att knappen tar användaren vidare trots att de inte gjort några ändringar Problemet med inaktiva knappar är att de förvirrar mer än de hjälper och de funkar dåligt ur ett tillgänglighetsperspektiv. De är ofta designade så att de inte går att läsa (kontrasten är dålig) eller så är det inte uppenbart vad man måste gör för att knappen ska kunna användas. Specifikationer Egenskap Beskrivning Typsnitt Proxima nova semibold Typsnitt storlek Motsvarande 14px Padding vänster-höger Motsvarande 20px Padding uppe-nere Motsvarande 14px Rambredd 1px Mellanrum mellan knappar som ligger på rad 20px om inget annat anges Primär knapp bakgrund #006bb1 Primär knapp ramfärg #006bb1 Primär knapp textfärg #fff Primär knapp bakgrund : hover #1e3479 Primär knapp ramfärg: hover #1e3479 Primär knapp textfärg: hover #fff Sekundär knapp bakgrund #fff Sekundär knapp ramfärg #006bb1 Sekundär knapp textfärg #006bb1 Sekundär knapp bakgrund : hover #cce1ef Sekundär knapp ramfärg: hover #006bb1 Sekundär knapp textfärg: hover #006bb1 Varningsknapp ramfärg #e4352d Varningsknapp textfärg #e4352d Varningsknapp bakgrund : hover #fad7d5 Varningsknapp ramfärg: hover #e4352d Varningsknapp textfärg: hover #e4352d