IconButton
@/components/ui/IconButton
Ikon-only knapp med GARANTERT 44×44px trefflate (WCAG 2.5.5 / Apple HIG), uansett hvor lite ikonet inni er.
Når brukes den
Bruk i stedet for å rulle en ny <button> med egen padding hver gang en handling kun har et ikon, ingen synlig tekst.
aria-label er obligatorisk siden knappen aldri har synlig tekst.
Bruk tone="error" for en destruktiv radhandling (Slett) — nøytral i hvile, rødt vises kun ved hover/fokus. Ikke la den være rød i hvile; det roper høyere enn handlingen trenger.
Sett disabledReason når en bruker uten skrivetilgang skal forstå hvorfor en radhandling (Rediger/Slett) er sperret.
Eksempler
Standard
Trefflaten er alltid 44×44px, uansett hvor lite ikonet er satt til (her 16px). Nøytral i hvile — farge kommer kun av hover/fokus.
<IconButton aria-label="Rediger" onClick={rediger}>
<Rediger size={16} />
</IconButton>Toner
`default` (text-secondary, hover gray-alpha-100 + text-primary) og `error` (samme hvile, men error-light + error-text ved hover/fokus) — for destruktive radhandlinger som ikke skal rope rødt konstant.
default
error
<IconButton aria-label="Slett bygg" tone="error" onClick={slett}>
<Slett size={16} />
</IconButton>Størrelser
`sm` (32px) og `md` (40px, standard) på desktop — begge holder likevel 44×44px trefflate under lg-brytpunktet og på berøring.
sm
md
Deaktivert
Vanlig deaktivert-tilstand, uten forklaring.
Deaktivert med grunn
disabledReason vises som tooltip (title) og en skjermleser-tekst koblet med aria-describedby, for viewer-sperrede radhandlinger.
Props
Sveip tabellen for å se hele innholdet