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åverka 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. Exempel: aria-label="Redigera roller".
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 |
|
|
|
|
|