Styleguide
Komponenter och kod har flyttat så det kan det vara lite stökigt här nu!

I april 2025 driftsattes en ny version av komponentbiblioteket som matchar Jordbruksverkets nya grafiska profil. Samtidigt har vi flyttat till en ny plattform, Storybook, där du hämtar kod till komponenterna. Där hittar du även layoutsystemet, färger, ikoner och typografi. Styleguide i Storybook - v22.1.17

Gå till komponentbiblioteket

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.

HTML Webbkomponent 
<button type="button" class="c-btn">Medium</button>
<button type="button" class="c-btn c-btn--compact">Kompakt</button>
<button type="button" class="c-btn c-btn--small">Small</button>
<jv-button size="medium" full-width="none">
  <button type="button" >Medium</button></jv-button>

<jv-button size="compact" full-width="none">
  <button type="button" >Kompakt</button></jv-button>

<jv-button size="small" full-width="none">
  <button type="button" >Small</button></jv-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.

HTML Webbkomponent 
<button type="button" class="c-btn c-btn--primary">Medium</button>
<button type="button" class="c-btn c-btn--primary c-btn--compact">Kompakt</button>
<button type="button" class="c-btn c-btn--primary c-btn--small">Small</button>
<jv-button  size="medium" type="primary" full-width="none">
  <button type="button" >Medium</button></jv-button>

<jv-button  size="compact" type="primary" full-width="none">
  <button type="button" >Kompakt</button></jv-button>

<jv-button  size="compact" type="primary" full-width="none">
  <button type="button" >Small</button></jv-button>

Knappar med ikoner

HTML Webbkomponent 
<button type="button" class="c-btn c-btn--primary"><span aria-hidden="true" class="sjv-i-redigera"></span>Primär</button>
<button type="button" class="c-btn c-btn--primary"><span aria-hidden="true" class="sjv-i-redigera"></span></button>


<button type="button" class="c-btn"><span aria-hidden="true" class="sjv-i-redigera"></span>Standardknapp</button>
<button type="button" class="c-btn"><span aria-hidden="true" class="sjv-i-redigera"></span></button>
<jv-button  size="medium" type="primary" full-width="none">
  <button type="button" ><span aria-hidden="true" class="sjv-i-redigera"></span>Primär</button></jv-button>
<jv-button  size="medium" type="primary" full-width="none">
  <button type="button" ><span aria-hidden="true" class="sjv-i-redigera"></span></button></jv-button>


<jv-button  size="medium" full-width="none">
  <button type="button" ><span aria-hidden="true" class="sjv-i-redigera"></span>Standardknapp</button></jv-button>
<jv-button  size="medium" full-width="none">
  <button type="button" ><span aria-hidden="true" class="sjv-i-redigera"></span></button></jv-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.

HTML Webbkomponent 
<button type="button" class="c-btn c-btn--primary" disabled>Inaktiv primärknapp</button>

<button type="button" class="c-btn" disabled>Inaktiv Standardknapp</button>
<jv-button  size="medium" full-width="none" type="primary">
  <button type="button" disabled>Inaktiv primärknapp</button></jv-button>

<jv-button  size="medium" full-width="none">
  <button type="button" disabled>Inaktiv Standardknapp</button></jv-button>

Primärknappen på mörk bakgrund

HTML Webbkomponent 
<div class="exempel-dark_background">
   <button type="button" class="c-btn c-btn--dark c-btn--primary">Medium</button>
   <button type="button" class="c-btn c-btn--dark c-btn--compact c-btn--primary">Kompakt</button>
   <button type="button" class="c-btn c-btn--dark c-btn--small c-btn--primary">Small</button>
</div>
<div class="exempel-dark_background">
   <jv-button  size="medium" theme="dark" full-width="none" type="primary">
      <button type="button" >Medium</button></jv-button>
   <jv-button  size="compact" theme="dark" full-width="none" type="primary">
      <button type="button" >Kompakt</button></jv-button>
   <jv-button  size="small" theme="dark" full-width="none" type="primary">
      <button type="button" >Small</button></jv-button>
</div>

Standardknappen på mörk bakgrund

HTML Webbkomponent 
<div class="exempel-dark_background">
   <button type="button" class="c-btn c-btn--dark" >Medium</button>
   <button type="button" class="c-btn c-btn--dark c-btn--compact" >Kompakt</button>
   <button type="button" class="c-btn c-btn--dark c-btn--small" >Small</button>
</div>
<div class="exempel-dark_background">
   <jv-button  size="medium" theme="dark" full-width="none">
      <button type="button" >Medium</button></jv-button>
   <jv-button  size="compact" theme="dark" full-width="none">
      <button type="button" >Kompakt</button></jv-button>
   <jv-button  size="small" theme="dark" full-width="none">
      <button type="button" >Small</button></jv-button>
</div>

Inaktiv på mörk bakgrund

HTML Webbkomponent 
<div class="exempel-dark_background">
   <button type="button" class="c-btn c-btn--dark" disabled>Standardknapp</button>
   <button type="button" class="c-btn c-btn--dark c-btn--primary" disabled>Primär</button>
</div>

<div class="exempel-dark_background">
   <jv-button size="medium" theme="dark" full-width="none">
      <button type="button" disabled>Standardknapp</button></jv-button>
   <jv-button size="medium" theme="dark" full-width="none" type="primary">
      <button type="button" disabled>Primär</button></jv-button>
</div>

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide