Button

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

Slik tar du den i bruk

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/button/button.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

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

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

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<button {...fs.button()}>Send søknad</button>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } 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:

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

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

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

Se Typesikker bruk.

Gjenbrukbar knapp i React.

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

type Props = ComponentProps<"button"> & {
  variant?: ButtonVariant
}

export function Knapp({ variant, ...rest }: Props) {
  return <button {...fs.button({ variant })} {...rest} />
}

Bytter teamet rammeverk, er det denne ene komponenten som skrives om, ikke designsystemet.

ComponentProps<"button"> tar med ref, som siden React 19 er en vanlig prop og følger med gjennom {...rest} uten forwardRef. ComponentPropsWithRef og ComponentPropsWithoutRef trengs ikke lenger.

`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

<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
Ren HTML

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

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%;
}

Klasser du kan style

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

Variabel	Standard
`--fs-button-padding`	`var(--fs-spacing-2) var(--fs-spacing-4)`
`--fs-button-radius`	`var(--fs-spacing-1)`
`--fs-button-border-width`	`1px`
`--fs-button-font-weight`	`var(--font-weight-medium)`
`--fs-button-line-height`	`var(--fs-line-height-default)`

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

Et eksempel. En knapp som skal stå i en tabellrad trenger mindre luft enn en som står alene:

Eksempel
Ren HTML

<button class="fs-button">Åpne saken</button>
<button class="fs-button rad-knapp" data-variant="secondary">Åpne</button>

.rad-knapp {
--fs-button-padding: var(--fs-spacing-1) var(--fs-spacing-3);
--fs-button-radius: var(--fs-spacing-4);
}

Klassen rad-knapp er din. Systemet kjenner den ikke, og den virker fordi variabelen arves ned i knappen.

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

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.