Installer

Bruk

Alle React-komponentene er tree-shakable, slik at du bare inkluderer den koden du trenger.

API

Alle komponentene er implementert med React forwardRef. Dette lar deg sende en ref som prop dersom du ønsker egen logikk på dom-elementet.

De fleste komponenter utvider typen til det underliggende HTML-elementet de benytter. Flere komponenter bruker også OverridableComponent.

Styling

Komponentstyling er ikke integrert i React-koden. Du må selv importere @navikt/ds-css i prosjektet ditt manuelt. Stylingen er ikke auto-prefikset, slik at det er prosjektet ditt sitt ansvar å løse ved hjelp av f.eks. PostCSS og Autoprefikser. De fleste bundlere løser dette for deg.

Pakken @navikt/ds-css inneholder all komponentstyling, fonter, ulike CSS-resets, print, CSS-variablene våre fra @navikt/ds-tokens og normalize.css v8.

Stylelint

Vi anbefaler alle å ta i bruk stylelint-konfigurasjonen vår. Den lar deg sikre at tokens og styling fra Aksel fungerer som forventet.

Fontlasting

Fonten vi benytter blir lastet fra CDN, slik at du må gjøre noen tilpasninger i løsningen din.

Vi angir font-display: swap, som medfører at en erstatningsfont vil bli lastet dersom den fonten ikke hentes raskt nok. For å unngå FOUT anbefales det å legge til en link-tag med preload i document-head. Du kan lese mer om dette i denne demoen.

Det er også nødvendig å oppdatere content security policy for å tillate font-src fra cdn.nav.no.

Ikoner

Ikonpakken vår inneholder totalt 800+ ikoner i stroke og fill versjon. Disse kan benyttes som separate React-komponenter eller direkte som SVG-er etter behov.

Både width og height er satt til 1em på ikonene. Dette gjør det enkelt å plassere ikonene inline med tekst, men det er nødvendig å justere størrelsen selv ved behov. Vi anbefaler hovedsakelig å bruke 24px ikoner der det er mulig, da ikonene er designet for denne størrelsen.

Vi anbefaler også å bruke title-attributtet der det er mulig, fremfor aria-label, ettersom dette gir en bedre opplevelse for skjermleserbrukere.