Komponenter

Den kanoniske «legg til»-seksjonen: seksjonshode, add-trigger, liste og tomtilstand i én tilstandsmaskin som hindrer dobbel-trigger.

Standardknappen: sju varianter, fire størrelser, fire former, samt lenke-modus som ser ut som en knapp.

Ikon-only knapp med GARANTERT 44×44px trefflate (WCAG 2.5.5 / Apple HIG), uansett hvor lite ikonet inni er.

«…»-knappen: sekundære HANDLINGER samlet bak én trigger, bygget på Popover.

Chromet for «nedtrekk med søk»: felt + resultatliste med full piltastnavigasjon og en ekte WAI-ARIA-combobox.

Leverandør- eller organisasjonsoppslag mot Brønnøysundregistrene: skriv et navn, velg treffet, og posten opprettes/gjenbrukes med org.nr., adresse og bransje.

Et valg som er del av et skjema og bekreftes/lagres samlet — «button role="checkbox"», aldri et rått input-element med type="checkbox".

En sone for når filen ER hovedhandlingen på flaten — kontoutskrift, tilstandsrapport, vedtekter.

Delt feilmelding for skjema/handlinger, utenfor et felt. role="alert" annonserer den for skjermleser straks den dukker opp.

Standard tekstfelt (Input) og flerlinjefelt (Textarea) — samme API, samme utseende og feilhåndtering.

Engangskodefeltet fra innloggings- og registreringsflytene — hopper til store, sperrede sifre idet feltet får innhold.

Radio (enkeltvalg) og RadioGroup (rovende tastaturnavigasjon) — for en LENGRE liste der hvert alternativ trenger en egen beskrivelse. Ikke for 2–4 valg (regel/velg-en-av-fa-ingen-radio).

Ett søkefelt for hele systemet: lupe til venstre, samme høyde/kant/fokus som Input.

Felles nedtrekksvelger med samme høyde, kant og fokusoppførsel som Input — beholder semantikken til et nativt nedtrekksfelt.

AV/PÅ-bryter for en innstilling som trer i kraft med én gang valget er lagret.

Rund identitetsflate — bilde eller initial-fallback. AvatarGroup stabler flere med overlapp og en «+N».

Liten pille (radius full) for ETT kort tilstandsord — prioritet, status eller en nøytral kategori.

Delt «etikett over verdi»-rutenett for et sett med korte faktafelter på en flate.

Metadata inne i en eksisterende flate: en liten tertiær etikett over en verdi, kort-løs.

Avrundet flate med tonet bakgrunn og farget ikon — bakgrunn og ikonfarge settes SAMMEN av tonen, aldri hver for seg.

Visuell representasjon av én tastetast — mono, kant, min-bredde 20px.

Den ene flate listeraden — brukes i en flat, delelinje-delt beholder, aldri ett kort per element.

Vannrett søyle som viser MENGDE i forhold til de andre radene i et sett.

Liten, avhengighetsfri markdown-renderer for dokumentflater — bygger React-elementer direkte, ingen dangerouslySetInnerHTML.

Felles KPI-kort — samme materiale som Card (bg surface, kant via box-shadow, radius-md), med tall/etikett/ikon-oppsett.

Liten fargeprikk (8px) for en tilstand inline i tekst eller en rad — «på nett», «synkronisert», «venter».

«Ikonfirkant/nummerskive + heading-14 + copy-13» for ett steg i en kort forklarende sekvens — kortet BÆRER sin egen kant, ingen ytre Card trengs.

Data-drevet grid for kolonner av tall som sammenlignes NEDOVER — månedsoversikt, historikk, en flerårsprognose.

Én kilde til all tekststil — bruker .type-*-klassene i globals.css i stedet for løse Tailwind-typografiklasser.

Et fagord med forklaringen der ordet står — prikket understrek, forklaring på hover/fokus (tooltip) og trykk (panel), samme tekst begge veier.

Visuelt skille for «dette hører til her, men er ikke selve steget/raden» — et strukturelt skille eller en tips-/varselboks, med valgfri label, ikon og én CTA.

Feiring av at noe FULLFØRES — et konfettiteppe fra toppen, i Frivios egne tokenfarger. Ingen ekstern avhengighet.

Felles tomtilstand: stiplet kort med nøytral ikonsirkel, tittel, kort forklaring og valgfri handling.

«Psst, ny ting»-kort for en ny brukervendt evne — plasseres INLINE ved siden av funksjonen, vises én gang per nettleser.

Farget venstrekant + ikon + fritekst, for en kommentar knyttet til ETT tall/resultat over.

Delt lastetilstand i tre varianter — inline, blokk og panel — bygget på den delte Spinner-komponenten.

Vannrett linje som viser ANDEL av én helhet fullført (0–100) — fylt flate (default aksent) på et gray-alpha-200-spor.

Inline kvittering ved siden av et felt som lagrer på blur/endring, uten en egen Lagre-knapp.

Plassholder for innhold under lasting — gray-alpha-200 med skimmer, radius-sm, `aria-hidden`.

Liten, roterende venteindikator — standard 20×20px, text-secondary.

Viser FREMDRIFT gjennom et fast antall steg — ikke et navigasjonselement, prikkene/pillene er ikke klikkbare.

«Angre etter», ikke bare «bekreft før» — invertert kort, `useToast().vis({ tekst, tone?, handling?, varighet?, preserve?, vedLukking? })` inne i en `ToastProvider`.

Kort, invertert hjelpetekst ved hover/fokus på ETT element — bg text-primary, tekst bg, label-13.

Én delt dropdown for «velg ett element fra en liste, se hva som er aktivt» — knapp + popup-liste bygget på Popover.

Sidenavigasjon for en delt liste — «Forrige»/«Neste» og sidetall, ellipse ved mange sider.

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

Tastatursnarveier i «g, så en bokstav»-mønsteret (som GitHub/Linear) — to tastetrykk, ingen modifikatorer.

Understrek-faner for å bytte mellom søskenvisninger som deler scope og datamodell — erstatter AreaTabs (founder 2026-09-10: «Tabs ser mer ut som knapper»).

To IconButton + et årstall — bla år for år gjennom historikk.

Sidens primærhandling i en rad som kleber til bunnen av rulleområdet under 640px, og står i normal flyt fra 640px — for lange sider der primærknappen ellers havner under bretten på mobil.

Standard beholder for innhold: surface-flate, kant via box-shadow, 12px radius, ingen dropskygge i hvile.

Skallet for beboer-/leverandør-/feilflater UTENFOR innlogget app — full høyde, sentrert kolonne, valgfri logo øverst.

Skjuler en gruppe rader bak en klikkbar overskrift. Åpen/lukket-tilstand huskes per bruker via localStorage.

Sidebeholderen (marg, toppluft, maks-bredde) og sidetoppen (tittel, «i»-popover, handling) brukt på så godt som hver dashbord-side.

Overskrift for en SEKSJON inne i en side — tittel, én kort forklaringssetning og en valgfri handling til høyre.

1px skillelinje — horisontal eller vertikal, med en valgfri sentrert etikett.

Erstatter native window.confirm() med en dialog i designsystemet. Kalles via useConfirm() inne i en ConfirmProvider. Bygget på Modal + ModalActions.

Dialogflaten for alt du GJØR — skjema, valg, lagring, sletting. Fast bredde (480/640px) og sentrert fra 640px (sm); på mobil er modalen et bunnark i bunnen av skjermen.

Delt chrome for et ANKRET panel mot en trigger — posisjon, elevasjon, Escape, klikk-utenfor, fokusretur og mobil-ark. Materiale «meny»: bg surface, shadow-menu, min-bredde 220px.