# Knappar

---

### Exempel på knappar

<iframe height="200" src="https://xbm.se/rf/css/knappar.html" title="knappar" width="400"></iframe>

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

<p class="callout info">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 : `<button aria-label="Redigera roller">Redigera</button>`.</p>

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

<table border="1" id="bkmrk-egenskap-beskrivning" style="border-collapse: collapse; width: 100%; height: 725px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><thead><tr style="height: 29px;"><td style="height: 29px;">Egenskap</td><td style="height: 29px;">Beskrivning

</td></tr></thead><tbody><tr style="height: 29px;"><td style="height: 29px;">Typsnitt</td><td style="height: 29px;">Proxima nova semibold

</td></tr><tr style="height: 29px;"><td style="height: 29px;">Typsnitt storlek</td><td style="height: 29px;">Motsvarande 14px</td></tr><tr style="height: 29px;"><td style="height: 29px;">Padding vänster-höger</td><td style="height: 29px;">Motsvarande 20px

</td></tr><tr style="height: 29px;"><td style="height: 29px;">Padding uppe-nere</td><td style="height: 29px;">Motsvarande 14px

</td></tr><tr style="height: 29px;"><td style="height: 29px;">Rambredd</td><td style="height: 29px;">1px

</td></tr><tr><td>Mellanrum mellan knappar som ligger på rad</td><td><div><div>20px om inget annat anges</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Primär knapp bakgrund</td><td style="height: 29px;"><div><div>\#006bb1</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Primär knapp ramfärg</td><td style="height: 29px;"><div><div>\#006bb1</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Primär knapp textfärg</td><td style="height: 29px;">\#fff

</td></tr><tr style="height: 29px;"><td style="height: 29px;">Primär knapp bakgrund : hover</td><td style="height: 29px;"><div><div>\#1e3479</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Primär knapp ramfärg: hover</td><td style="height: 29px;"><div><div>\#1e3479</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Primär knapp textfärg: hover</td><td style="height: 29px;">\#fff

</td></tr><tr style="height: 29px;"><td style="height: 29px;">Sekundär knapp bakgrund</td><td style="height: 29px;"><div><div>\#fff</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Sekundär knapp ramfärg</td><td style="height: 29px;"><div><div>\#006bb1</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Sekundär knapp textfärg</td><td style="height: 29px;">\#006bb1

</td></tr><tr style="height: 29px;"><td style="height: 29px;">Sekundär knapp bakgrund : hover</td><td style="height: 29px;"><div><div>\#cce1ef</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Sekundär knapp ramfärg: hover</td><td style="height: 29px;"><div><div>\#006bb1</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Sekundär knapp textfärg: hover</td><td style="height: 29px;">\#006bb1

</td></tr><tr style="height: 29px;"><td style="height: 29px;">Varningsknapp ramfärg</td><td style="height: 29px;"><div><div>\#e4352d</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Varningsknapp textfärg</td><td style="height: 29px;">\#e4352d

</td></tr><tr style="height: 29px;"><td style="height: 29px;">Varningsknapp bakgrund : hover</td><td style="height: 29px;"><div><div>\#fad7d5</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Varningsknapp ramfärg: hover</td><td style="height: 29px;"><div><div>\#e4352d</div></div></td></tr><tr style="height: 29px;"><td style="height: 29px;">Varningsknapp textfärg: hover</td><td style="height: 29px;">\#e4352d

</td></tr></tbody></table>