PillTabs

@/components/ui/PillTabs

Kompakt segmentkontroll for filter/utvalg i én liste — aktiv fane vises som en invertert pille i en felles bane.

Når brukes den

Filter eller utvalg i én liste (prioritet, tidshorisont, byggvelger) — ikke navigasjon mellom visninger, bruk Tabs til det.
Kompakt bytte mellom noen få underfaner eller visningsvalg (arkiv-underfaner).
Får ikke fanene plass på én linje, samles de siste automatisk bak en «…»-knapp (målt på bredde, ikke et fast mobilbrekkpunkt) — aldri radbryting.
Ikke bruk til sidens HOVED-faner der ALLE valg skal være synlige samtidig, eller til ekte navigasjon mellom søskenvisninger — det er Tabs sin jobb.
Ikke bruk som erstatning for en radio-gruppe utover to-fem alternativer — se regel/velg-en-av-fa-ingen-radio.

Eksempler

Knapp-modus, med etikett

Klient-tilstand (ikke ruting) via `onSelect` — riktig når fanene bytter visning på samme side.

Vis

<PillTabs label="Vis" activeKey={tab} onSelect={setTab} tabs={[{ key: 'oversikt', label: 'Oversikt' }, …]} />

Overflow — trigger viser antall

Rekke kunstig smalgjort (320px) — de siste fanene havner bak triggeren i stedet for å brekke til ny linje. Triggeren viser «+N» (antall skjulte faner), ikke bare en ellipse, med aria-label «N flere valg» (UX-strategi 11. sep 2026, mønster 2: en «…» uten hint sier ikke hvor MYE som er skjult).

Props

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

tabs *

{ key: string; label: string; href?: string }[]

—

Fanene. `href` gir lenke-modus (ruting), utelatt gir knapp-modus (onSelect).

activeKey *

string

—

Nøkkelen til aktiv fane.

onSelect

(key: string) => void

—

Knapp-modus: kalles med valgt key.

label

string

—

Valgfri liten etikett foran pillene (f.eks. «Vis»).

scroll

boolean

true

Lenke-modus: styrer Next.js sin scroll-til-topp ved navigering.

overflow

boolean

true

Slå av for å tillate radbryting i stedet for «…»-samling.

Regler

regel/velg-en-av-fa-ingen-radio

Beslektede komponenter