Button

Kildekode på GitHub · Les som Markdown

Knapp-komponenten brukes til handlinger og navigasjon. Den støtter flere varianter, størrelser og kan brukes som en lenke med asChild.

Utforsk

<Button>Klikk meg</Button>

Importering

import { Button } from "@kilden/designsystem";

Varianter

• default – primærknapp med kant, fylles ved hover. Brukes for hovedhandlingen.
• secondary – kun tekst, får kant ved hover. Brukes for sekundære handlinger.
• ghost – usynlig knapp med bakgrunn ved hover. Passer i verktøylinjer og menyer.
• destructive – for handlinger som sletter eller ikke kan angres.

<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
</div>

Størrelser

icon er for knapper som bare inneholder et ikon. De må ha en aria-label, ellers har knappen ikke noe tilgjengelig navn.

<div style={{ display: "flex", gap: "8px", alignItems: "center", flexWrap: "wrap" }}>
<Button size="sm">Liten</Button>
<Button size="md">Medium</Button>
<Button size="default">Standard</Button>
<Button size="icon" aria-label="Varsler">
  <Bell className="h-4 w-4" />
</Button>
</div>

Lastetilstand

Bruk isLoading for å vise en spinner og deaktivere knappen. Uten loadingText vises children ved siden av spinneren, slik at knappen beholder sitt tilgjengelige navn. Sett loadingText for å endre teksten under lasting.

isLoading fungerer også sammen med asChild — spinneren legges da inn i barn-elementet, og deaktivert tilstand settes med aria-disabled (siden f.eks. lenker ikke har et disabled-attributt). loadingText brukes ikke med asChild.

<Button isLoading>Send inn</Button>

<Button isLoading loadingText="Sender...">
  Send inn
</Button>

<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
  <Button isLoading>Send inn</Button>
  <Button isLoading loadingText="Sender...">Send inn</Button>
  <Button variant="secondary" isLoading loadingText="Lagrer...">Lagre</Button>
  <Button variant="ghost" isLoading>Laster</Button>
</div>

Som lenke

Med asChild kan knappen brukes som wrapper rundt en lenke:

<Button asChild>
  <a href="/side">Gå til side</a>
</Button>

Bruksanbefalinger

Tilgjengelighet

• Rendres som et native <button>, og aktiveres med Enter og Space
• disabled bruker det native attributtet, slik at knappen ikke kan fokuseres eller aktiveres
• isLoading deaktiverer knappen og setter aria-busy. Uten loadingText beholder knappen teksten sin som tilgjengelig navn
• Med asChild (f.eks. som lenke) uttrykkes deaktivert tilstand med aria-disabled, siden lenker ikke har et disabled-attributt
• Knapper med size="icon" må ha aria-label
• Synlig fokusmarkering ved tastaturnavigasjon
• Bruk asChild med <a> for navigasjon og <button> for handlinger – ikke omvendt

Props