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