Styleguide

Knappar

Knappar används för att användaren ska kunna utföra något på en webbplats eller en tjänst. Det finns flera varianter av knappar som alla har olika syften.

Design och språk

Knapparna ska placeras till vänster. Har man flera knappar ska de placeras bredvid varandra i en logisk ordning, det vill säga en föregående-knapp ska till exempel placeras till vänster om en nästa-knapp.

Text på knappen

Texten på en knapp ska vara kort men tillräckligt lång för att användaren ska förstå varför den ska klicka på knappen och vad som händer när den klickar på knappen. Är syftet med knappen att man ska beställa öronbrickor ska texten vara Beställ öronbrickor istället för Beställ eller Klicka här.

Vissa knappar har fasta uttryck beroende på syftet med knappen.

Knappar med fast text

Skriv

Skriv inte

Syfte med knappen

Nästa

Gå vidare, fortsätt

Komma till nästa steg i ett flöde

Föregående

Backa, bakåt, tillbaka

Gå till föregående steg i ett flöde

Logga in

Inloggning

Starta inloggning

Logga ut

Utloggning

Avsluta inloggning

Avbryt

Avsluta

Avbryta det man håller på med

Spara

OK

Spara värden och stanna kvar på sidan eller formuläret

Komponent och kod

Komponenten driftsattes första gången i version 1.0.0. Knappar finns i storlekarna small, medium och large. Storlekarna medium och small kan du använda om utrymmet på skärmen är begränsat.

Sekundär

Den sekundära knappen är den vanligaste knappen och du kan använda flera sekundära knappar på en sida.  

HTML 
<button class="c-btn--large">Large</button>

<button class="c-btn--medium">Medium</button>

<button class="c-btn--small">Small</button>

Primär

Du ska använda en primär knapp för att dra uppmärksamhet till den viktigaste händelsen på sidan eller i formuläret. Det får bara finnas en primär knapp per sida. Du använder den primära knappen för Call-to-action.

HTML 
<button class="c-primary-btn--large">Large</button>

<button class="c-primary-btn--medium">Medium</button>

<button class="c-primary-btn--small">Small</button>

Textknapp

HTML 
<button class="c-btn-text--large">Large</button>
<button class="c-btn-text--medium">Medium</button>
<button class="c-btn-text--small">Small</button>

Knappar med ikoner

HTML 
<button type="button" class="c-primary-btn--large"><span class="sjv-i-redigera button-icon--left"></span>Primär</button>
<button type="button" class="c-btn--large"><span class="sjv-i-redigera button-icon--left"></span>Sekundär</button>
<button type="button" class="c-btn-text--large"><span class="sjv-i-installningar button-icon--left"></span>Textknapp</button>

Inaktiv

Alla knappar visas som inaktiva genom att sätta "disable" attribut på knapp-elementet.

HTML 
<button class="c-btn--large" disabled="">Inaktiv sekundär</button>
<button class="c-primary-btn--large" disabled="">Inaktiv primär</button>
<button class="c-btn-text--large" disabled="">Inaktiv textknapp</button>

Knapp utan text

Lägg till ett aria-label attribut när knappen saknar en text som beskriver vad som händer när man väljer knappen. Attributet ska beskriva vad som händer, till exempel stäng, så att den som lyssnar sig igenom en tjänst med skärmläsare kan förstå syftet med knappen.

HTML 
<button class="c-btn--large" aria-label="Stäng">X</button>

Primär på mörk bakgrund

HTML 
<div class="exempel-dark_background">
   <button type="button" class="c-primary-btn-dark--large">Large</button>
   <button type="button" class="c-primary-btn-dark--medium">Medium</button>
   <button type="button" class="c-primary-btn-dark--small">Small</button>
</div>

Sekundär på mörk bakgrund

HTML 
<div class="exempel-dark_background">
   <button type="button" class="c-btn-dark--large">Large</button>
   <button type="button" class="c-btn-dark--medium">Medium</button>
   <button type="button" class="c-btn-dark--small">Small</button>
</div>

Textknapp på mörk bakgrund

HTML 
<div class="exempel-dark_background">
   <button type="button" class="c-btn-text-dark--large">Large</button>
   <button type="button" class="c-btn-text-dark--medium">Medium</button>
   <button type="button" class="c-btn-text-dark--small">Small</button>
</div>

Inaktiv på mörk bakgrund

HTML 
<div class="exempel-dark_background">
   <button type="button" class="c-primary-btn-dark--large" disabled="">Inaktiv primär</button>
   <button type="button" class="c-btn-dark--large" disabled="">Inaktiv sekundär</button>
   <button type="button" class="c-btn-text-dark--large" disabled="">Inaktiv text</button>
</div>

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide