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