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 loadingText="">Klikk meg</Button>Importering
import { Button } from "@kilden/designsystem";Varianter
Default
<Button>Default</Button>Secondary
<Button variant="secondary">Secondary</Button>Outline
<Button variant="outline">Outline</Button>Ghost
<Button variant="ghost">Ghost</Button>Link
<Button variant="link">Link</Button>Destructive
<Button variant="destructive">Destructive</Button>Størrelser
<Button size="sm">Liten</Button>
<Button size="default">Standard</Button>
<Button size="lg">Stor</Button>
<Button size="icon">🔔</Button>Interaktivt eksempel
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}> <Button>Default</Button> <Button variant="secondary">Secondary</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="link">Link</Button> </div>
Lastetilstand
Bruk isLoading for å vise en spinner og deaktivere knappen. Du kan også sette loadingText for å endre teksten under lasting.
<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="outline" 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
Bruk primary for hovedhandlinger
Bruk default-varianten for den viktigste handlingen på siden.
Ikke bruk flere primary-knapper
Unngå å ha flere default-knapper ved siden av hverandre. Bruk secondary eller outline for sekundære handlinger.
Props
| Prop | Type | Default | Beskrivelse |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | "default" | Visuell stil |
size | "default" | "sm" | "lg" | "icon" | "default" | Størrelse |
asChild | boolean | false | Bruk child-elementet som rot |
disabled | boolean | false | Deaktiver knappen |
isLoading | boolean | false | Viser en spinner og deaktiverer knappen |
loadingText | string | — | Tekst som erstatter children under lasting |