Button

Klassen settes på et vanlig <button>. Ingen JavaScript lastes, og den virker likt i alle rammeverk.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/button.css"

Varianter

Eksempel

Kode

<button class="fs-button">Send søknad</button>
<button class="fs-button" data-variant="secondary">Lagre utkast</button>
<button class="fs-button" data-variant="ghost">Legg til vedlegg</button>
<button class="fs-button" data-variant="danger">Slett søknad</button>

data-variant	Brukes til
(utelatt)	Hovedhandlingen på siden. Bruk bare én.
secondary	Alternativ handling ved siden av hovedhandlingen
ghost	Lav vekt, for verktøylinjer, handlinger i tabeller og kort
danger	Sletter eller kan ikke angres

Deaktivert

Eksempel

Kode

<button class="fs-button" disabled>Send søknad</button>
<button class="fs-button" data-variant="secondary" disabled>Lagre utkast</button>

disabled finnes bare på <button>. Ser knappen ut som en lenke i markupen, bruk aria-disabled="true". Da beholder skjermlesere elementet og kan si at det er utilgjengelig.

Lenke som ser ut som knapp

Eksempel

Kode

<a class="fs-button" href="#">Gå til oversikten</a>
<a class="fs-button" data-variant="secondary" href="#">Les vilkårene</a>

Navigerer du brukeren, skal elementet være en <a> selv om det ser ut som en knapp. Da virker høyreklikk, midtklikk og «åpne i ny fane».

TypeScript

import { fs, type ButtonVariant } from "@fristil/designsystem"

const knapp = document.querySelector<HTMLButtonElement>("#send")

fs.setAttributes(knapp, fs.button({ variant: "secondary" }))

fs.button() uten argument gir primærknappen, som ikke trenger noe data-variant.

Kommer varianten fra et API eller en URL, valider den:

const variant: ButtonVariant = fs.button.isVariant(svar.variant)
  ? svar.variant
  : "primary"

fs.setAttributes(knapp, fs.button({ variant }))

Se Typesikker bruk.

Klasser du kan style

Klasse	Hva det er
.fs-button	Knappen. Varianten kommer fra data-variant.

Variabel	Standard
--fs-button-padding	var(--size-2) var(--size-4)
--fs-button-radius	var(--size-1)

:root {
  --fs-button-radius: 9999px;
}

Standardverdien følger --size-skalaen, så knappen holder seg i takt med resten om du endrer skalaen. Se Tilpasning.

På smal skjerm

Knappeteksten brekker når den må. En knapp med en lang norsk ledetekst, som «Send søknaden om bostøtte for hele kalenderåret 2026», ville ellers blitt bredere enn telefonen, og da ruller hele siden sidelengs.

Trenger du en knapp i full bredde, er det appens oppsett:

.skjema-knapp {
  inline-size: 100%;
}

Tilgjengelighet

• <button> utfører en handling, <a> flytter deg et annet sted. Velg etter hva som skjer, ikke hvordan det ser ut.
• Inne i et <form> er type="submit" standard. Skal knappen ikke sende skjemaet, skriv type="button".
• La teksten beskrive handlingen: «Slett bruker» sier mer enn «OK».
• Ikke bruk en deaktivert knapp som eneste forklaring på hvorfor noe ikke går. Vis en feilmelding brukeren kan gjøre noe med.