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>
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">
                    Ta bort
                </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>

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

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.

Default: false

mobileFullWidth: boolean Optional

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

Default: false

type: string Optional

The default behavior of the button. Possible values are:

• submit
• reset
• button

Default: "button"

Slots

default

Slot for text to display in the button.

Relaterat

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