Komponent

FButton

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. Det får bara finnas en primär knapp per sida.

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. 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.

<script lang="ts">
import { defineComponent } from "vue";
import { FCard, FButton } from "@fkui/vue";

export default defineComponent({
    name: "FCardExample",
    components: { FCard, FButton },
});
</script>

<template>
    <f-card>
        <template #header="{ headingSlotClass }">
            <h3 :class="headingSlotClass">Arbete</h3>
        </template>
        <template #default>
            <p>Arbetsgivare</p>
            <p>
                Gatan 1 <br />
                123 45 Staden <br />
                Sverige
            </p>
            <p>
                <label class="label"> Telefonnummer </label>
                <span> 0109999999 </span>
            </p>
        </template>
        <template #footer>
            <div class="button-group">
                <f-button
                    variant="tertiary"
                    align-text
                    class="button-group__item"
                    icon-left="trashcan"
                >
                    Ta bort
                </f-button>
                <f-button variant="tertiary" align-text class="button-group__item" icon-left="pen">
                    Ändra
                </f-button>
            </div>
        </template>
    </f-card>
</template>

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.

<script setup lang="ts">
import { FButton } from "@fkui/vue";
</script>

<template>
    <div class="button-group">
        <f-button class="button-group__item" icon-left="success"> Knapp 1 i grupp </f-button>
        <f-button class="button-group__item" variant="secondary" icon-left="error">
            Knapp 2 i grupp
        </f-button>
    </div>
</template>

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.

<script setup lang="ts">
import FButton from "../FButton.vue";
</script>

<template>
    <ul class="button-list no-marker">
        <li>
            <f-button variant="tertiary" icon-left="success"> Knapp 1 i lista </f-button>
        </li>
        <li>
            <f-button variant="tertiary" icon-left="cross"> Knapp 2 i lista </f-button>
        </li>
        <li>
            <f-button variant="tertiary" icon-left="pen"> Knapp 3 i lista </f-button>
        </li>
    </ul>
</template>
<style>
.no-marker {
    list-style-type: none;
}
</style>

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: string Optional

Type of button, can be one of:

• primary
• secondary
• tertiary

Default: "primary"

size: string Optional

Button size, can be one of:

• small
• medium
• large

Default: "medium"

iconLeft: string Optional

Name of an icon to display on the left side of the button.

Default: undefined

iconRight: string Optional

Name of an icon to display on the right side of the button.

Default: undefined

iconLibrary: string Optional

Icon library to use.

Default: "f"

tertiaryStyle: string Optional

Tertiary button style, used in conjunction with button variant tertiary. Can be one of:

• standard
• black
• inverted

Default: "standard"

alignText: boolean Optional

Align button text and icon with content above or below. Used in conjunction with button variant tertiary.

mobileFullWidth: boolean Optional

Enable full width on mobile for sizes small and medium, always active for button size large.

type: string Optional

The default behavior of the button. Possible values are:

• submit
• reset
• button

Default: "button"

Slots

default

‐

Relaterat

• FTableButton för åtgärdsknapp i tabell.