Knapp
- Komponent
- Status
- 
        Produktionsklar
En knapp används för att utföra en handling. Detta till skillnad mot en länk som används för att navigera mellan sidor eller inom en sida.
Knappen finns i tre varianter och tre storlekar. En knapp har en text och kan kompletteras med en ikon.
Primär knapp
Använd primär knapp för det primära och det mest troliga alternativet för användaren. Generellt ska endast en primär knapp finnas på en sida. I fallet när en sida består av flera olika delar kan varje del ha en primär knapp.
Sekundär knapp
Använd sekundär knapp fristående eller tillsammans med en primär knapp.
-<f-button> Knapptext </f-button>
+<f-button variant="secondary"> Knapptext </f-button>
Tertiär knapp
Använd tertiär knapp om en sekundär knapp blir för framträdande. Tertiär knapp passar bra när flera knappar ska grupperas, till exempel om ett kort ska ha knappar för att ändra eller ta bort objekt som kortet representerar. Den kan användas som en tredje knapp tillsammans med en primär och en sekundär knapp i en grupp. Tertiär knapp ska alltid ha ikon, förutom när den används i en grupp tillsammans med en primär eller sekundär knapp. Knapptexten är understruken om en tertiär knapp används utan en ikon.
-<f-button> Knapptext </f-button>
+<f-button variant="tertiary"> Knapptext </f-button>
Svart tertiär knapp används för funktioner som inte har att göra med det huvudsakliga flödet eller innehållet på en sida, tex Skriv ut.
-<f-button variant="tertiary"> Knapptext </f-button>
+<f-button variant="tertiary" tertiary-style="black"> Knapptext </f-button>
Inverterad tertiär knapp används för att få en bättre kontrast mot en mörk bakgrund.
-<f-button> Knapptext </f-button>
+<f-button variant="tertiary" tertiary-style="inverted"> Knapptext </f-button>
Linjera tertiär knapp med innehåll
Om du vill linjera den tertiära knappens text eller ikon med innehåll placerat ovanför eller under knappen så använd prop align-text.
Detta lägger på en negativ vänstermarginal.
Observera att minimum bredd på knappen också tas bort.
Storlekar
Alla varianter av knappen finns i tre storlekar:
- Small
- Medium (standard)
- Large
Knapparnas storlekar kan användas för att förstärka den visuella hierarkin mellan knapparna på en sida. Knappens bredd bestäms av längden på knapptexten. För varje knappstorlek finns en minsta bredd.
-<f-button> text </f-button>
+<f-button size="large"> text </f-button>
Fullbredd
Fullbreddsknappar är främst avsedda att användas på ytor upp till 639 pixlars bredd. Knappar som har storleken Large sätts automatiskt till fullbredd när skärmbredden är upp till 639 pixlar.
Fullbredd i mobilläge
Knappar (small & medium) är som standard inte fullbredd i mobil men kan aktiveras med prop mobile-full-width.
-<f-button> text </f-button>
+<f-button mobile-full-width> text </f-button>
Ikon
Alla typer av knappar kan ha en ikon som placeras till höger eller vänster om texten. Använd ikoner för att förtydliga knappens funktion och skapa snabbare igenkänning.
-<f-button> text </f-button>
+<f-button icon-left="pen"> text </f-button>
Hantering av asynkrona åtgärder
Beroende på om den funktion som anropas av en knapp är synkron eller asynkron,
och om den returnerar en Promise,
så får knappen olika beteende.
Synkron kod
Om funktionen som körs vid knapptryck är synkron (ej asynkron, returnerar ingen Promise):
- Ingen spinner visas.
- Knappen beter sig som vanligt – användaren kan klicka flera gånger direkt efter varandra.
<script>
+   function syncOperation(): void {
+       const response = doSomething();
+       console.log("This operation blocked the entire page until finished");
+   }
</script>
<template>
-   <f-button> text </f-button>
+   <f-button @click="syncOperation"> text </f-button>
</template>
Asynkron kod med Promise
Om funktionen returnerar en Promise (till exempel vid användning av async/await eller annan Promise-baserad logik):
- Om åtgärden tar längre än 200 ms, visas en spinner på knappen under tiden åtgärden pågår.
- Har knappen en ikon, ersätts ikonen temporärt av en spinner.
- Saknar knappen ikon, visas spinnern till vänster om knappens text.
 
- Knappen inaktiveras tills Promiseär resolved eller rejected.
<script>
+   async function asyncOperation(): Promise<void> {
+       const response = await fetch("/api");
+       console.log("This request blocked the button until finished");
+}
</script>
<template>
-   <f-button> text </f-button>
+   <f-button @click="asyncOperation"> text </f-button>
</template>
Asynkron kod utan Promise
Om åtgärden är asynkron men inte returnerar en Promise (till exempel fetch utan att returnera vidare, eller callback-baserad logik):
- Behandlas som en synkron åtgärd – ingen spinner visas och knappen inaktiveras inte.
<script>
+   function backgroundJob(): void {
+       fetch("/api").then(response => {
+           console("This request ran in the background");
+       });
+   });
</script>
<template>
-   <f-button> text </f-button>
+   <f-button @click="backgroundJob"> text </f-button>
</template>
Inaktiv
Inaktiv knapp bör undvikas i stor utsträckning som möjligt.
Gruppering
Knappar grupperas som standard i en button-group. Med en button-group visas knapparna horisontellt. Om bredden på ytan där knapparna visas inte räcker visas knapparna på flera rader. En button-group kan användas när knappar ska visas horisontellt i desktop och vertikalt och fullbredd i mobil.
Använd en button-list om knapparna alltid ska visas vertikalt med en knapp per rad. Alla knappar som är i en grupp ska ha samma storlek.
Copy
En knapptext ska vara en tydlig och kort uppmaning, till exempel "Signera", "Skicka in", "Fyll i", "Ansök", "Lägg till". Knappars text för endast skärmläsare (SR-only-text) ska vara så beskrivande att den fungerar utan någon annan kontext, till exempel "Signera ansökan om föräldrapenning".
Äldre typer av knappar
Alla tidigare typer av knappar finns kvar för att nuvarande applikationer ska fortsätta att fungera utan ändringar. Men när vi uppdaterar en applikation ska följande ändringar göras:
- Diskret knapp - ska ersättas med en tertiär knapp av lämplig storlek.
- Standard - ska ersättas med en sekundär knapp av lämplig storlek.
- Primär och sekundär ska ändras så att de använder en faktisk storlek.
API
Props
- 
                            variant: stringOptional
- 
                            Type of button, can be one of: - primary
- secondary
- tertiary
 Default: "primary"
- 
                            size: stringOptional
- 
                            Button size, can be one of: - small
- medium
- large
 Default: "medium"
- 
                            iconLeft: stringOptional
- 
                            Name of an icon to display on the left side of the button. Default: undefined
- 
                            iconRight: stringOptional
- 
                            Name of an icon to display on the right side of the button. Default: undefined
- 
                            iconLibrary: stringOptional
- 
                            Icon library to use. Default: "f"
- 
                            tertiaryStyle: stringOptional
- 
                            Tertiary button style, used in conjunction with button variant tertiary. Can be one of:- standard
- black
- inverted
 Default: "standard"
- 
                            alignText: booleanOptional
- 
                            Align button text and icon with content above or below. Used in conjunction with button variant tertiary.
- 
                            mobileFullWidth: booleanOptional
- 
                            Enable full width on mobile for sizes smallandmedium, always active for button sizelarge.
- 
                            type: stringOptional
- 
                            The default behavior of the button. Possible values are: - submit
- reset
- button
 Default: "button"
Slots
- 
                            default
- ‐
Relaterat
- FTableButton för åtgärdsknapp i tabell.