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
När du ska använda 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.
Placering
Behöver du använda 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, kompakt och medium. Storlekarna small och kompakt kan du använda om utrymmet på skärmen är begränsat.
Standardknapp
Standardknappen är den vanligaste knappen. Du kan använda flera standardknappar på en sida och de kan också placeras bredvid varandra. Tidigare kallades standardknappen för sekundär knapp.
<button class="c-btn c-btn--medium" type="button">Medium</button>
<button class="c-btn c-btn--compact" type="button">Kompakt</button>
<button class="c-btn c-btn--small" type="button">Small</button>
Primär knapp
Behöver du en knapp som sticker ut så ska du använda den primära knappen. Den kan du använda 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.
<button class="c-btn c-btn--primary c-btn--medium" type="button">Medium</button>
<button class="c-btn c-btn--primary c-btn--compact" type="button">Kompakt</button>
<button class="c-btn c-btn--primary c-btn--small" type="button">Small</button>Knappar med ikoner
<button type="button" class="c-btn c-btn--primary c-btn--medium"><span class="sjv-i-redigera"></span>Primär</button>
<button type="button" class="c-btn c-btn--primary c-btn--medium" aria-label="redigera"><span class="sjv-i-redigera"></span></button>
<button type="button" class="c-btn c-btn--medium"><span class="sjv-i-redigera"></span>Standard</button>
<button type="button" class="c-btn c-btn--medium" aria-label="redigera"><span class="sjv-i-redigera"></span></button>Inaktiv knapp
Använd inte inaktiva knappar. Knappar används för att användaren ska kunna utföra något och alla knappar ska därför vara interagerbara. Kräver din desing en inaktiv knapp bör du ändra designen.
Alla knappar visas som inaktiva genom att du sätter "disable" attribut på knapp-elementet.
<button type="button" class="c-btn c-btn--primary c-btn--medium" disabled="">Inaktiv primär</button>
<button type="button" class="c-btn c-btn--medium" disabled="">Inaktiv sekundär</button>Primärknappen på mörk bakgrund
<div class="exempel-dark_background">
<button type="button" class="c-btn c-btn--primary c-btn--medium c-btn--dark">Medium</button>
<button type="button" class="c-btn c-btn--primary c-btn--compact c-btn--dark">Kompakt</button>
<button type="button" class="c-btn c-btn--primary c-btn--small c-btn--dark">Small</button>
</div>Standardknappen på mörk bakgrund
<div class="exempel-dark_background">
<button type="button" class="c-btn c-btn--medium c-btn--dark">Medium</button>
<button type="button" class="c-btn c-btn--compact c-btn--dark">Kompakt</button>
<button type="button" class="c-btn c-btn--small c-btn--dark">Small</button>
</div>Inaktiv på mörk bakgrund
<div class="exempel-dark_background">
<button type="button" class="c-btn c-btn--primary c-btn--medium c-btn--maxwidth" disabled>Medium</button>
<button type="button" class="c-btn c-btn--medium c-btn--maxwidth" disabled>Medium</button>
</div>
Knappar som tar full bredd på små skärmar
<button type="button" class="c-btn c-btn--primary c-btn--medium c-btn--maxwidth">Medium</button>
<button type="button" class="c-btn c-btn--medium c-btn--maxwidth">Medium</button>Exempel
Senast publicerad
Sidansvarig för sidan är Styleguide