Button
@/components/ui/Button
Standardknappen: sju varianter, fire størrelser, fire former, samt lenke-modus som ser ut som en knapp.
Når brukes den
primary for DEN ene viktigste handlingen på flaten (maks én gang per flate) — nøytral monokrom, IKKE blå.
secondary for en tydelig sekundærhandling (kantet flate), tertiary for en lavere-vekt handling ved siden av annen tekst.
error for destruktive handlinger (sletting o.l.), warning for en handling med en konsekvens brukeren bør merke seg (sort tekst på amber).
accent for et fylt CTA (blå ellers reservert lenker/fokus). soft for en tonet NØYTRAL sekundærhandling ved siden av innhold (f.eks. «Kopier») — rendyrket til gråtoner i bølge 3, ikke lenger aksentfarget.
Bruk href (ikke <Link><Button /></Link>) når knappen navigerer i stedet for å utføre en handling på siden.
shape="square"/"circle" kun for ETT ikon uten tekst; "rounded" for en pille-formet handling. TS krever aria-label på disse to formene — umulig å glemme og få bygget til å kompilere.
Tekst i INNHOLD skjules ALDRI på mobil (ikke `hidden sm:inline` på kallestedet) — en knapp med tekst beholder den på alle bredder. Trenger den å bli smalere, korte selve ordet, ikke skjul det.
Sett disabledReason når en bruker uten skrivetilgang skal se HVORFOR handlingen er sperret, før hun prøver.
Ikke legg et ledende ikon på generiske knapper som Lagre/Avbryt — kun når ikonet navngir handlingen (opprett/last opp/generer/send/slett).
Eksempler
Varianter
primary er den ENE viktigste handlingen på en flate; secondary/tertiary er sekundære i synkende vekt; error/warning er tilstandsknapper; accent er et fylt CTA; soft er en tonet nøytral sekundærhandling.
primary
secondary
tertiary
error
warning
accent
soft
<Button variant="accent" size="md">Ny handling</Button>
Størrelser
xs (24px) er for tett, tallrik UI (tabellrader); sm/md dekker de fleste flater; lg for hero-CTA-er. xs/sm/md får 44px trefflate automatisk under 1024px.
<Button variant="secondary" size="xs">xs</Button>
Former
"default" er standard rektangel; "rounded" er en pille; "square"/"circle" er KUN for ett ikon uten tekst (samme trefflate-garanti som størrelsen tilsier).
<Button variant="secondary" shape="circle" size="md" aria-label="Slett">
<Slett size={16} />
</Button>Lastetilstand
Vis mens handlingen pågår — knappen låses (disabled) og en spinner erstatter ingenting av teksten.
Deaktivert
Vanlig deaktivert-tilstand, uten forklaring — bruk kun når det ikke finnes noen forklaring brukeren har nytte av.
disabledReason — rettighet vist FØR forsøket
En bruker uten skrivetilgang skal se grunnen med én gang siden lastes, ikke et 403 etter at hun har trykket.
Kun lesetilgang i dette sameiet
<Button disabled={!kanSkrive} disabledReason={KUN_LESE_KORT}>
Oppdater felleskostnad
</Button>Bekreftet (confirmed)
Kortvarig kvittering på at handlingen lyktes («Kopiert», «Lagret») — en tilstand som legges oppå enhver variant, ikke en egen variant.
Lenke som ser ut som en knapp (href)
Rendrer next/link direkte i stedet for å neste <Button> inni en <Link> — unngår to fokus-stopp for én handling.
<Button href="/eiendom" variant="secondary">Gå til Eiendom</Button>
Props
Sveip tabellen for å se hele innholdet