Tabs
@/components/ui/Tabs
Understrek-faner for å bytte mellom søskenvisninger som deler scope og datamodell — erstatter AreaTabs (founder 2026-09-10: «Tabs ser mer ut som knapper»).
Når brukes den
Søskenvisninger som deler scope og datamodell — f.eks. et områdes underfaner (Økonomi → Regnskap/Budsjett), eller kolonner/arkiv-visning av samme tiltaksliste.
Lenke-modus (default, href per fane) for ekte sidenavigasjon mellom undersider.
Knapp-modus (onSelect på komponenten) når fanene styrer klient-tilstand i stedet for ruting — samme mønster som PillTabs.
IKKE for urelaterte sider uten felles scope — det er sidemenyen sin jobb.
IKKE for filtre eller et lite fast utvalg som ikke er navigasjon — det er PillTabs.
Regel, ikke kodebegrensning: maks 5–7 faner på desktop, 3–4 på mobil. Flere enn det ruller raden i sin egen beholder (fade-kant på sidene), men en lesbar fane-rad er fortsatt et designvalg, ikke noe komponenten håndhever.
Eksempler
Lenke-modus (default)
href per fane gir ekte sidenavigasjon. Ankrene under peker til denne siden selv, kun for demoen.
<Tabs
activeKey={activeKey}
ariaLabel="Økonomi"
tabs={[
{ key: 'dashboard', label: 'Dashboard', href: '/eiendom', icon: Dashboard },
{ key: 'drift', label: 'Drift', href: '/eiendom/drift', icon: Drift, badge: 3 },
]}
/>Knapp-modus (onSelect), med ikon og tallmerke
Som PillTabs: klient-tilstand, ingen ruting. Fanen blir en <button> i stedet for en <Link>.
<Tabs activeKey={tab} onSelect={setTab} tabs={[{ key: 'oversikt', label: 'Oversikt', icon: Hms }, …]} />secondary
Ingen glidende understrek — aktiv fane får en bakgrunnsflate i stedet. Bruk der understreken ville konkurrert med noe annet i flaten (f.eks. inni et kort).
disabled
En fane uten noe innhold ennå (f.eks. avhengig av et forrige steg) — nedtonet og uklikkbar, uten å forsvinne fra oversikten.
Overflow: mange faner
Ni faner i en 420px beholder — raden ruller vannrett med en tonende kant, aldri body-sidescroll. Kanten forsvinner når du har rullet til enden på den siden.
Props
Sveip tabellen for å se hele innholdet