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