\n","language","react","68198a004edd",[535,536,537],[],{"_22":544,"_24":38,"_39":545,"_41":546},{"_22":541,"_24":38,"_39":542,"_41":543},{"_22":538,"_24":38,"_39":539,"_41":540},"e0df9247a8d6",[]," prop. ","1c97630c6d53",[253],"boxSize","c622f6bc6c6d",[],"Størrelsen på bildet kan du justeres ved hjelp av ","57342b22403a",[550],[],{"_22":551,"_24":38,"_39":552,"_41":553},"a62eb59240ce",[],"Størrelser","e46ab777c60b",{"_24":253,"_253":556,"_530":531},"","87a41ba213aa",[560],[],{"_22":561,"_24":38,"_39":562,"_41":563},"5287ba4dc308",[],"Bilde med border radius","26d94d09549e","grid",[569,570],"maxNumberOfColumns",2,{"_22":594,"_24":572,"_17":595,"_574":575},{"_22":571,"_24":572,"_17":573,"_574":575},"7d96fbb31e96","gridCell",[576],"verticalAlignment","top",{"_22":577,"_24":578,"_579":580,"_581":582,"_128":583},"088fb5883d7f","imageWithCaption","alt","Ei dame som klatre opp i fjell","caption",[586],{"_24":128,"_129":584},{"_131":585,"_24":133},"image-acb8d5a56e0edb06c01071588da84e2ae17af374-450x300-png",{"_22":587,"_24":29,"_30":588,"_32":589,"_34":35},"89719d3eec65",[590],[],{"_22":591,"_24":38,"_39":592,"_41":593},"7bf878dec194",[],"Bildetekst som beskriver noe om bildet over. Dette kan være over flere linjer. Lengden på teksten burde ikke overstige fire linjer for at det ikke skal ta for mye plass og at det blir for langt til neste seksjon. ","577fcd1d16f3",[596],{"_22":597,"_24":578,"_579":598,"_581":599,"_128":600},"23f2809bc320","Ei dame som klatre opp i fjell.",[602],{"_24":128,"_129":601},{"_131":585,"_24":133},{"_22":603,"_24":29,"_30":604,"_32":605,"_34":35},"65d130912447",[606],[],{"_22":607,"_24":38,"_39":608,"_41":609},"1f50f1925423",[],"Bildetekst som beskriver noe om bildet over. Dette kan være over flere linjer.","863b758eb39c",[613],[],{"_22":614,"_24":38,"_39":615,"_41":616},"287eac112e61",[],"To bilder med bildetekst","cdb3e4052616",{"_24":253,"_253":619,"_530":531},"\n Dan Abramov

\n","36ab332ba3c3",[623],[],{"_22":624,"_24":38,"_39":625,"_41":626},"766bb89b6d47",[],"Image er et bilde med tilhørende bildetekst. Lengden på teksten burde ikke overstige fire linjer for at det ikke skal ta for mye plass og at det blir for langt til neste seksjon. Her er et eksempel på et bilde med bildetekst","40a8d6fb6f85",[630],[],{"_22":631,"_24":38,"_39":632,"_41":335},"3a7151ad2954",[],"f0e147640b86","import { Image } from \"@vygruppen/spor-react\";","79420003e8ff",[637],{"_22":638,"_24":29,"_30":639,"_32":640,"_34":35},"bdf51e8b8301",[641],[],{"_22":642,"_24":38,"_39":643,"_41":644},"ca16a1b1f326",[],"Image eller bilde komponent er bildetekst som brukes til å vise bildene. ","ddabb6dd-5c77-41d6-9365-5084cf05323d",{"_24":128,"_129":649},"icon-button","IconButton",{"_131":650,"_24":133},"image-df727d34bb91f28092ac28cd37d2f5e1d3283c48-292x159-svg","ee949215-16d3-4b49-9844-293f4fe8445d",{"_24":128,"_129":655},"heading","Heading",{"_131":656,"_24":133},"image-a284325efba6b39f0c5999acdc8aead0a5676d9a-350x191-svg","8ecb8044-a222-416a-873b-a10f053318ed",{"_24":128,"_129":660},"Grid",{"_131":661,"_24":133},"image-e88c8eea072b711ef1876465f7cb7289229c9b13-292x159-png","51828f2f-fafb-4143-8319-88a14cc8b779",{"_24":128,"_129":666},"full-screen-loader","Full screen loader",{"_131":667,"_24":133},"image-bbd02891f42c446622a464cdc14acba78eee9157-292x159-svg","53b65bb0-a068-4cf6-80ff-29ce87397250",{"_24":128,"_129":672},"form-control","FormControl",{"_131":673,"_24":133},"image-ae236d313c50de6ae32de565fc904c1bbdc3206b-292x159-svg","1ee69d44-7746-4980-8786-4b0288072692",{"_24":128,"_129":678},"floating-action-button","Floating Action Button",{"_131":679,"_24":133},"image-e85618d0a12babbd272c88f54d98775fc87f39bd-292x159-svg","de23824e-84ad-498f-bf65-64bf59d81e3f",[687],{"_24":128,"_129":685},"filter-choice-chip","FilterChip and ChoiceChip",{"_131":686,"_24":133},"image-5a9eab7838b8456fb04f323296245a94b2e846be-292x159-svg",{"_22":688,"_24":29,"_30":689,"_34":35},"8666dc22a934",[690],{"_22":691,"_24":38,"_41":238},"6f02ec85d976","d702ef50-5394-4494-b081-373c5206c4a6","filter-chip","FilterChip","9e37d671-1bdd-449d-8601-cabff3161dca","Filter Chip","009f351f-6b0a-4391-9238-e575b7dfc7d8","errorsummary","ErrorSummary","8d451106-a3be-4a23-9554-71f25768c048",{"_24":128,"_129":704},"drawer","Drawer",{"_131":705,"_24":133},"image-4b31a728595926e04dbaaffa3d7d381c25ba4823-292x159-svg","33404e3e-8947-45b1-831b-19b518000b20",{"_24":128,"_129":710},"dialog","Dialog",{"_131":711,"_24":133},"image-3c5866ac1ddc7af3cdccc602e773adcdc08c9bd8-292x159-svg","9d789835-ef36-4e1c-b948-b2c385e1abda",{"_24":128,"_129":716},"datepicker","Datepicker",{"_131":717,"_24":133},"image-e0c4bc1454fa993f02ca60f0e278174a5ecf39f7-350x191-svg","f2f76d1a-ded4-48ac-97af-9db40267a4d0",{"_24":128,"_129":722},"content-loader","Content loader",{"_131":723,"_24":133},"image-64782a79f082d640776169fe32ff3532db020510-292x159-svg","4a6502de-923f-4be3-9d74-11e1327a69e1",{"_24":128,"_129":728},"combobox","Combobox",{"_131":729,"_24":133},"image-80742b19bd15c6d44aeb30e85073d257a2c8d134-350x197-svg","434bde68-4a83-4a1b-86c8-a48bcff84633",{"_24":128,"_129":734},"collapsible","Collapsible",{"_131":735,"_24":133},"image-bc64a5e5d87fc4785e0a29f5a39afe4d14e7ce7d-292x160-svg","05d675fc-694a-4341-82b7-7fb81cc03577",{"_24":128,"_129":740},"close-button","CloseButton",{"_131":741,"_24":133},"image-25724068a9398279142f7a9926f16a924e1671ca-292x159-svg","883906e2-567e-4051-b44b-87966c8548bf",[748],{"_24":128,"_129":747},"choice-chip","ChoiceChip",{"_131":686,"_24":133},{"_22":749,"_24":29,"_30":750,"_32":751,"_34":35},"d770e7ed3d92",[752],[],{"_22":753,"_24":38,"_39":754,"_41":238},"02de48772ed5",[],"ac97f2fc-bf49-4243-8245-588ad375896a",[761],{"_24":128,"_129":760},"choice-chip-new","Choice chip (new)",{"_131":686,"_24":133},{"_22":762,"_24":29,"_30":763,"_34":35},"713ef42ad2cc",[764],{"_22":765,"_24":38,"_41":238},"6c52826a5232","abbdcbc3-f620-465c-ac35-db98d2911bde",{"_24":128,"_129":770},"checkbox","Checkbox",{"_131":771,"_24":133},"image-9fc930742d0621932ee646f9777da9cb90b832b8-292x159-svg","4e3c10ff-5231-4943-b9e9-95a464a24b30",{"_24":128,"_129":776},"card-select","CardSelect",{"_131":777,"_24":133},"image-420afad275b0ad7503ac5c8ba76d21734c143900-292x160-svg","98eb46fa-6f51-4e27-8a10-e1394133a28e",{"_24":128,"_129":782},"card","Card (deprecated)",{"_131":783,"_24":133},"image-daabc7388f9859d5c95542b158fd6986e759fab4-292x159-svg","fca3eeec-e169-4ea4-b763-75ae7937d2e7",{"_24":128,"_129":788},"calendar","Calendar",{"_131":789,"_24":133},"image-3ab1de7e51b82e7b97237402b2226e23cc5fbbe6-740x380-png","d6e33ffd-9dc4-4864-a90f-b3497f788288",{"_24":128,"_129":792},{"_131":789,"_24":133},"4158c1d0-e954-49a5-85b6-7cea635f5739",{"_24":128,"_129":797},"button-group","Button Group",{"_131":798,"_24":133},"image-5f4afbc1615b5ce8a87aa72fbc82dec4444391ab-292x159-svg","9f1d5ed4-9875-4515-b980-e2b940e34a41",[806,807,808,809,810,811,812,813,814,815,816,817,818,819,820,821,822,823,824,825,826,827,828,829,830,831,832,833,834,835,836,837,838,839,840,841,842,843,844,845,846,847,848,849,850,851,852,853,854],{"_24":128,"_129":804},"button","Button",{"_131":805,"_24":133},"image-c9835415f3073a16571e50f76d712db16bc91283-292x159-svg",{"_22":1255,"_24":29,"_30":1256,"_32":1257,"_34":35},{"_22":1249,"_24":246,"_247":1250,"_249":1251,"_251":1252},{"_22":1243,"_24":29,"_30":1244,"_32":1245,"_34":274},{"_22":1233,"_24":29,"_30":1234,"_32":1235,"_34":35},{"_22":1228,"_24":246,"_247":248,"_249":1229,"_251":1230},{"_22":1221,"_24":29,"_30":1222,"_32":1223,"_34":35},{"_22":1214,"_24":29,"_30":1215,"_32":1216,"_34":35},{"_22":1207,"_24":29,"_30":1208,"_32":1209,"_34":274},{"_22":1200,"_24":29,"_30":1201,"_32":1202,"_34":35},{"_22":1186,"_24":29,"_30":1187,"_32":1188,"_34":35},{"_22":1179,"_24":29,"_30":1180,"_32":1181,"_34":35},{"_22":1175,"_24":246,"_247":248,"_249":1176,"_251":1177},{"_22":1160,"_24":29,"_30":1161,"_32":1162,"_34":35},{"_22":1156,"_24":246,"_247":248,"_249":1157,"_251":1158},{"_22":1145,"_24":29,"_30":1146,"_32":1147,"_34":35},{"_22":1141,"_24":246,"_247":248,"_249":1142,"_251":1143},{"_22":1130,"_24":29,"_30":1131,"_32":1132,"_34":35},{"_22":1126,"_24":246,"_247":248,"_249":1127,"_251":1128},{"_22":1110,"_24":29,"_30":1111,"_32":1112,"_34":35},{"_22":1106,"_24":246,"_247":248,"_249":1107,"_251":1108},{"_22":1099,"_24":29,"_30":1100,"_32":1101,"_34":274},{"_22":1076,"_24":29,"_30":1077,"_32":1078,"_34":35},{"_22":1071,"_24":246,"_247":248,"_249":1072,"_251":1073},{"_22":1064,"_24":29,"_30":1065,"_32":1066,"_34":35},{"_22":1057,"_24":29,"_30":1058,"_32":1059,"_34":331},{"_22":1050,"_24":29,"_30":1051,"_32":1052,"_34":35},{"_22":1046,"_24":246,"_247":248,"_249":1047,"_251":1048},{"_22":1039,"_24":29,"_30":1040,"_32":1041,"_34":35},{"_22":1032,"_24":29,"_30":1033,"_32":1034,"_34":35},{"_22":1025,"_24":29,"_30":1026,"_32":1027,"_34":274},{"_22":1018,"_24":29,"_30":1019,"_32":1020,"_34":35},{"_22":1013,"_24":246,"_247":248,"_249":1014,"_251":1015},{"_22":1006,"_24":29,"_30":1007,"_32":1008,"_34":35},{"_22":999,"_24":29,"_30":1000,"_32":1001,"_34":274},{"_22":992,"_24":29,"_30":993,"_32":994,"_34":35},{"_22":987,"_24":246,"_247":248,"_249":988,"_251":989},{"_22":980,"_24":29,"_30":981,"_32":982,"_34":35},{"_22":975,"_24":246,"_247":248,"_249":976,"_251":977},{"_22":968,"_24":29,"_30":969,"_32":970,"_34":274},{"_22":961,"_24":29,"_30":962,"_32":963,"_34":35},{"_22":930,"_24":29,"_30":931,"_32":932,"_34":35},{"_22":925,"_24":246,"_247":248,"_249":926,"_251":927},{"_22":918,"_24":29,"_30":919,"_32":920,"_34":331},{"_22":911,"_24":29,"_30":912,"_32":913,"_34":35},{"_22":866,"_24":565,"_17":867,"_567":568},{"_22":865,"_24":242,"_243":244},{"_22":859,"_24":29,"_30":860,"_32":861,"_34":331},{"_22":857,"_131":858,"_24":133},{"_22":855,"_131":856,"_24":133},"147b2071bcff","a0d1cecf-0949-40a6-b0fe-7208aa576d57","565682315b03","b1895e7b-fad6-4734-a9c8-d40ac6e11524","0d329c6dd88f",[862],[],{"_22":863,"_24":38,"_39":864,"_41":525},"487bc1678770",[],"c406bd51504c","d8767842c71e",[868,869],{"_22":887,"_24":572,"_17":888,"_574":575},{"_22":870,"_24":572,"_17":871,"_574":575},"bf06466bdd8b",[872],{"_22":873,"_24":578,"_579":874,"_581":875,"_128":876},"380915e9485d","Betal-knappen er ofte en primærknapp",[879],{"_24":128,"_129":877},{"_131":878,"_24":133},"image-f5551940c85160feb1e457bd4758dd52550db528-450x300-png",{"_22":880,"_24":29,"_30":881,"_32":882,"_34":35},"d6f17b36a43a",[883],[],{"_22":884,"_24":38,"_39":885,"_41":886},"78cf9d932de50",[],"Eksempel på bruk av Primærknapp","18019b96311e",[889,890],{"_22":905,"_24":29,"_30":906,"_32":907,"_34":35},{"_22":891,"_24":578,"_579":892,"_581":893,"_128":894},"d9624fc298dc","Skjermbilde av appen, der man bruker knapper til å toggle forskjellig funksjonalitet",[897],{"_24":128,"_129":895},{"_131":896,"_24":133},"image-48193d0034dc424f26993459a711f27fb427a717-450x300-png",{"_22":898,"_24":29,"_30":899,"_32":900,"_34":35},"a70f300e5dfe",[901],[],{"_22":902,"_24":38,"_39":903,"_41":904},"013cb7a102950",[],"Eksempel på bruk av Tilleggsknapp","6c408751da64",[908],[],{"_22":909,"_24":38,"_39":910,"_41":238},"da8f57504186",[],"a4c7790d784d",[914],[],{"_22":915,"_24":38,"_39":916,"_41":917},"c364785402270",[],"Knappene kommer i fire størrelser – lg, md, sm og xs . Valg av størrelse skal passe flyt og andre elementer Alle størrelsene finnes i en dynamisk og en kompakt variant. Dynamisk skal følge skjermstørrelse eller størrelsen på elementet den er i, og har variabel padding på sidene. Kompakt skal følge lengden på innholdet i knappen, og har fastsatt padding på begge sider. Alle størrelsene finnes i tre ulike layout versjoner. En med kun tekst, en med venstrestilt ikon og en med høyrestilt ikon. Det eneste unntaket er Tilleggsknapp som har en ekstra layoutvariant med venstre og høyrestilt ikon.","aa8ac24b3ce5",[921],[],{"_22":922,"_24":38,"_39":923,"_41":924},"3b5b65c5e3e10",[],"Design","9743edb844be",{"_24":253,"_253":929,"_530":531},{"_24":253,"_253":928,"_530":531},"// Ikke støttet i React Native enda","\n \n \n","efc6c7fe6c82",[933,934,935,936,937,938,939],[],{"_22":958,"_24":38,"_39":959,"_41":960},{"_22":955,"_24":38,"_39":956,"_41":957},{"_22":952,"_24":38,"_39":953,"_41":954},{"_22":949,"_24":38,"_39":950,"_41":951},{"_22":946,"_24":38,"_39":947,"_41":948},{"_22":943,"_24":38,"_39":944,"_41":945},{"_22":940,"_24":38,"_39":941,"_41":942},"31912c57ffb4",[]," props på toppnivå, og så vil de videresendes ned til de respektive komponentene automatisk.","df0169e28a71",[253],"size","110f64090749",[]," eller ","8fb9eba4ab9e",[253],"variant","d46f440c9ec2",[],"-komponenten til å gruppere dem sammen. Du kan spare deg noen tastetrykk (og sikre likt design) ved å sende inn ","aca0c458b832",[253],"ButtonGroup","6f3914f826fd",[],"Da kan det være greit å bruke ","511273fb25d9",[964],[],{"_22":965,"_24":38,"_39":966,"_41":967},"57804bfff5ff",[],"Av og til vil man tilby brukeren flere valg i samme slengen. Dialogbokser er et godt eksempel, kjøpsøyeblikk er et annet.","160ddc3247e0",[971],[],{"_22":972,"_24":38,"_39":973,"_41":974},"93e915d84880",[],"Bruk flere knapper sammen","848368754abd",{"_24":253,"_253":979,"_530":531},{"_24":253,"_253":978,"_530":531},"// Ikke støttet i React Native","() => {\n const CustomLink = (props) => (\n \n {props.children}\n \n );\n\n return (\n \n );\n}","97b122a764ee",[983],[],{"_22":984,"_24":38,"_39":985,"_41":986},"91920aa7f50a",[],"I React kan du også sende inn en egen komponent som rendres istedenfor. Om du bruker React Router eller Spor sin egne Link-komponenter, kan de sendes inn på samme måte:","282a44c6e503",{"_24":253,"_253":991,"_530":531},{"_24":253,"_253":990,"_530":531},"","","e40bb3b4d51d",[995],[],{"_22":996,"_24":38,"_39":997,"_41":998},"3f7f9a60f5c0",[],"Skal du bruke en knapp som en lenke, kan du gjøre det også.","8027737fe1c0",[1002],[],{"_22":1003,"_24":38,"_39":1004,"_41":1005},"eb428a05ba18",[],"Bruk som lenker","bae5ce129e67",[1009],[],{"_22":1010,"_24":38,"_39":1011,"_41":1012},"2a847d8f2e00",[],"Husk å sette en relevant tekst å lese opp for skjermlesere!","dd8ada10b8d0",{"_24":253,"_253":1017,"_530":531},{"_24":253,"_253":1016,"_530":531},"","\n \n Kjøp\n \n }\n isLoading\n aria-label=\"Laster\"\n pt={1}\n />\n \n","b115f8f50c4b",[1021],[],{"_22":1022,"_24":38,"_39":1023,"_41":1024},"cd97243e3518",[],"Knapper kan starte prosesser som kan ta litt tid å fullføre. Om man ikke kan sende brukeren videre til neste steg med en gang, kan man vise en lasteindikator - bedre kjent som en spinner.","336e971ceafa",[1028],[],{"_22":1029,"_24":38,"_39":1030,"_41":1031},"9c03b6b1435a",[],"Laste-modus","386eb7d2b1b8",[1035],[],{"_22":1036,"_24":38,"_39":1037,"_41":1038},"ae53d5acd686",[],"Det er også påkrevd å sende inn en tekstlig beskrivelse for skjermlesere.","bc6af63a7c8f",[1042],[],{"_22":1043,"_24":38,"_39":1044,"_41":1045},"3879c515de5e",[],"Det anbefales å unngå bruk av ikonknapper der det lar seg gjøre. Ofte er ikke ikonet nok i seg selv til å forstå hva knappen betyr.","3267554b412b",{"_24":253,"_253":1049,"_530":531},{"_24":253,"_253":928,"_530":531},"} \n aria-label=\"Informasjon\" \n/>","d72d54db5a66",[1053],[],{"_22":1054,"_24":38,"_39":1055,"_41":1056},"2d73251aff37",[],"Av og til kan man også ønske å ha en knapp med kun et ikon på. Det kan være nyttig i noen tilfeller der man har begrenset med plass. Da bruker man IconButton-komponenten:","634535015d65",[1060],[],{"_22":1061,"_24":38,"_39":1062,"_41":1063},"f27af101d62a",[],"Ikonknapper","e8516ab16f4b",[1067],[],{"_22":1068,"_24":38,"_39":1069,"_41":1070},"39d8ce38ddc2",[],"Man skal kun bruke ikon på én av sidene. Unntaket fra denne regelen er tilleggsknapper, som kan ha dem på begge sider.","aa502efda7f8",{"_24":253,"_253":1075,"_530":531},{"_24":253,"_253":1074,"_530":531},"\n \n \n","\n \n \n","d9d8607d32c6",[1079,1080,1081,1082,1083],[],{"_22":1096,"_24":38,"_39":1097,"_41":1098},{"_22":1093,"_24":38,"_39":1094,"_41":1095},{"_22":1090,"_24":38,"_39":1091,"_41":1092},{"_22":1087,"_24":38,"_39":1088,"_41":1089},{"_22":1084,"_24":38,"_39":1085,"_41":1086},"1f22bae257f7",[],".","a6b4de905d3b",[253],"rightIcon","2e6c2c6ec6e4",[]," og ","56805abe5f10",[253],"leftIcon","2f2811cc7d3f",[],"Du kan legge til ikoner med henholdsvis ","a9d2eb40908b",[1102],[],{"_22":1103,"_24":38,"_39":1104,"_41":1105},"edb7608dab75",[],"Knapper med ikoner","9a75e8891bcb",{"_24":253,"_253":1109,"_530":531},{"_24":253,"_253":1109,"_530":531},"","92d861c4e520",[1113,1114,1115],[],{"_22":1123,"_24":38,"_39":1124,"_41":1125},{"_22":1119,"_24":38,"_39":1120,"_41":1121},{"_22":1116,"_24":38,"_39":1117,"_41":1118},"269d7278743c",[],", som kun skal brukes for å vise billettkontroll. For anledningen vist med et ikon til venstre.","9e28f25164d1",[1122],"Kontrollknappen","strong","f2c615a370fc",[],"Til slutt har vi ","deea33dd456f",{"_24":253,"_253":1129,"_530":531},{"_24":253,"_253":1129,"_530":531},"","f8df98b8a260",[1133,1134],[],{"_22":1138,"_24":38,"_39":1139,"_41":1140},{"_22":1135,"_24":38,"_39":1136,"_41":1137},"573a323fb5da",[]," brukes, som navnet hinter om, til tillegsvalg. Den brukes der det er behov for flere knapper samlet, som skal ha lik synlighet.","89056bbcfd50",[1122],"Tilleggsknapper","8bb5b1b25cb0",{"_24":253,"_253":1144,"_530":531},{"_24":253,"_253":1144,"_530":531},"","9ca089249431",[1148,1149],[],{"_22":1153,"_24":38,"_39":1154,"_41":1155},{"_22":1150,"_24":38,"_39":1151,"_41":1152},"06445269deaf",[]," skal brukes der det er bruk for mindre viktige knapper, eller der du trenger flere valgalternativer. ","abadfe7ab8b9",[1122],"Tertiærknapper","feaca51059a6",{"_24":253,"_253":1159,"_530":531},{"_24":253,"_253":1159,"_530":531},"","c0efb1c79b86",[1163,1164,1165],[],{"_22":1172,"_24":38,"_39":1173,"_41":1174},{"_22":1169,"_24":38,"_39":1170,"_41":1171},{"_22":1166,"_24":38,"_39":1167,"_41":1168},"a01a0c408f8b",[],", som skal brukes ved sekundære handlinger, og der det er behov for flere valg.","969d50cb5cce",[1122],"sekundærknapper","467ece449ecb",[],"Vi har ","f7e6a580f3b5",{"_24":253,"_253":1178,"_530":531},{"_24":253,"_253":1178,"_530":531},"","5f225e66ebdc",[1182],[],{"_22":1183,"_24":38,"_39":1184,"_41":1185},"d6568a70e768",[],"Det skal ikke være mer enn én primærknapp per skjermbilde.","0eb83f9259df",[1189,1190,1191],[],{"_22":1198,"_24":38,"_39":1199,"_41":1174},{"_22":1195,"_24":38,"_39":1196,"_41":1197},{"_22":1192,"_24":38,"_39":1193,"_41":1194},"247e18f1287d",[],", som skal definere primære handlinger i våre digitale verktøy og tjenester. Eksempler kan være \"Kjøp billett\" eller \"Logg inn\". ","ff5f79bbbd16",[1122],"primærknapper","17528ced9c54",[],"aa59ddc64ae4",[1203],[],{"_22":1204,"_24":38,"_39":1205,"_41":1206},"7914f7f9cde9",[],"Knappene finnes i ulike varianter for ulike brukstilfeller. ","3bd6faeede35",[1210],[],{"_22":1211,"_24":38,"_39":1212,"_41":1213},"8c1ca103cbdf",[],"Varianter","ae17fbc20c73",[1217],[],{"_22":1218,"_24":38,"_39":1219,"_41":1220},"794742850d35",[],"Knapper kan være dynamiske (følger størrelsen til elementet som inneholder knappen), eller kompakte (tar kun opp så mye plass som den trenger for å vise innholdet sitt).","dd9651b69b48",[1224],[],{"_22":1225,"_24":38,"_39":1226,"_41":1227},"cb9d63ed0992",[],"Størrelsen vil ofte bli valgt ut fra konteksten den brukes i. Merk at vi burde unngå å bruke den minste størrelsen, og kun når man trenger en knapp i en liten container. Grunnen til det er fordi de er veldig små, og ganske vanskelige å finne.","8c519490b53f",{"_24":253,"_253":1232,"_530":531},{"_24":253,"_253":1231,"_530":531},"\n \n \n \n \n","\n \n \n \n \n","8abfe0391b49",[1236,1237],[],{"_22":1241,"_24":38,"_39":1242,"_41":803},{"_22":1238,"_24":38,"_39":1239,"_41":1240},"08e8df84e119",[]," kommer i fire forskjellige størrelser:","130d817a33f4",[253],"a82e778b839a",[1246],[],{"_22":1247,"_24":38,"_39":1248,"_41":553},"987ad039d7fb",[],"c9d06dac12cd","preview-only",{"_24":253,"_253":1254,"_530":531},{"_24":253,"_253":1253,"_530":531},"\n \n \n \n \n \n \n","\n \n \n \n \n \n \n","96de5b83708d",[1258],[],{"_22":1259,"_24":38,"_39":1260,"_41":238},"bd35a33248320",[],"7da79b57-0a10-4166-a877-d905cf96e0dc",{"_24":128,"_129":1265},"breadcrumb","Breadcrumb",{"_131":1266,"_24":133},"image-b8047e4b0e328a0a4102f4685e115cd0f7c73f5f-292x159-svg","770be7f3-bb4b-4def-978c-6455c4ab9f4d",[1274,1275,1276,1277,1278,1279,1280,1281,1282,1283,1284,1285,1286,1287,1288,1289,1290,1291,1292],{"_24":128,"_129":1272},"box","Box",{"_131":1273,"_24":133},"image-419ad119ebe3c9d6336b7656997a98acd54ae840-292x159-svg",{"_22":1426,"_24":25,"_17":1427},{"_22":1423,"_24":337,"_338":1424,"_340":1425},{"_22":1417,"_24":29,"_30":1418,"_32":1419,"_34":331},{"_22":1394,"_24":29,"_30":1395,"_32":1396,"_34":35},{"_22":1389,"_24":246,"_247":248,"_249":1390,"_251":1391},{"_22":1382,"_24":29,"_30":1383,"_32":1384,"_34":35},{"_22":1377,"_24":246,"_247":248,"_249":1378,"_251":1379},{"_22":1370,"_24":29,"_30":1371,"_32":1372,"_34":274},{"_22":1363,"_24":29,"_30":1364,"_32":1365,"_34":35},{"_22":1356,"_24":29,"_30":1357,"_32":1358,"_34":35},{"_22":1351,"_24":246,"_247":248,"_249":1352,"_251":1353},{"_22":1326,"_24":280,"_17":1327,"_19":282},{"_22":1319,"_24":29,"_30":1320,"_32":1321,"_34":274},{"_22":1312,"_24":29,"_30":1313,"_32":1314,"_34":35},{"_22":1305,"_24":29,"_30":1306,"_32":1307,"_34":35},{"_22":1302,"_24":246,"_247":248,"_249":1303},{"_22":1301,"_24":242,"_243":244},{"_22":1295,"_24":29,"_30":1296,"_32":1297,"_34":331},{"_22":1293,"_131":1294,"_24":133},"46f6fb177c85","968c94f8-eee4-4319-aa3b-116f7c0f50be","6f53f2ae5371",[1298],[],{"_22":1299,"_24":38,"_39":1300,"_41":525},"3a0e27394a82",[],"6b715c09d620","1a069823d8ba",{"_24":253,"_253":1304},"Gå til forsiden","e748219fe9d5",[1308],[],{"_22":1309,"_24":38,"_39":1310,"_41":1311},"5701c0a00f45",[],"I React-implementasjonen kan man også spesifisere hva slags DOM-element man ønsker rendret.","a0f0abc27b43",[1315],[],{"_22":1316,"_24":38,"_39":1317,"_41":1318},"79c4aaddc4d5",[],"Box-komponenten aksepterer alle styling props man kan sende til en div eller et View. ","d0d3d4492f61",[1322],[],{"_22":1323,"_24":38,"_39":1324,"_41":1325},"978922331d9f",[],"Hvilke props støttes?","1e6711765da4",[1328,1329],{"_22":1344,"_24":29,"_30":1345,"_32":1346,"_34":35},{"_22":1330,"_24":29,"_30":1331,"_32":1332,"_34":35},"198cc34a3b3e",[1333,1334,1335],[],{"_22":1341,"_24":38,"_39":1342,"_41":1343},{"_22":1338,"_24":38,"_39":1339,"_41":1340},{"_22":1336,"_24":38,"_39":1337,"_41":1086},"3830f02a7611",[],"dbf90e90b108",[253],"style={{ margin: '50%' }}","0db647f8bade",[],"I React Native er du bundet til spacing-skalaen om du ønsker å bruke styling props. Om du trenger en prosentvis størrelse, kan du definere den ved ","95a2cab28d28",[1347],[],{"_22":1348,"_24":38,"_39":1349,"_41":1350},"8c3db9f24595",[],"I React har du muligheten til å spesifisere forskjellige enheter, som f.eks. rem eller em, om du vil. Vi anbefaler som regel allikevel at man bruker spacing-skalaen der det gir mening","b5c58546cef0",{"_24":253,"_253":1355},{"_24":253,"_253":1354},"\n Her får alt margin 3\n","\n Juster verdiene for å se hva de gjør\n","aea16dad8cc6",[1359],[],{"_22":1360,"_24":38,"_39":1361,"_41":1362},"b7f588ad9db3",[],"Du har en rekke forskjellige margin props du kan sette:","d6398fd0ba31",[1366],[],{"_22":1367,"_24":38,"_39":1368,"_41":1369},"15626d27651e",[],"Mange komponenter trenger ofte å ha en viss avstand til hverandre. Det kan du lett spesifisere med margin-props.","1dabf6c6ad1b",[1373],[],{"_22":1374,"_24":38,"_39":1375,"_41":1376},"01e513b9cdbe",[],"Avstander","f6d9ad1b60c9",{"_24":253,"_253":1381},{"_24":253,"_253":1380},"\n \n En mørkegrønn boks\n \n \n Rund\n \n \n Feilmelding\n \n","\n \n En mørkegrønn boks\n \n \n Rund\n \n \n Feilmelding\n \n","267ba62a1843",[1385],[],{"_22":1386,"_24":38,"_39":1387,"_41":1388},"aafaaa7ff298",[],"En Box i seg selv gjør – som en div – veldig lite ut av seg. Men den kan formes til å gjøre alt mulig rart. Her er et par forskjellige eksempler:","d9109c011b65",{"_24":253,"_253":1393},{"_24":253,"_253":1392},"Jeg er inne i en boks","Jeg er inne i en boks","c588dd868015",[1397,1398,1399,1400,1401],[],{"_22":1414,"_24":38,"_39":1415,"_41":1416},{"_22":1411,"_24":38,"_39":1412,"_41":1413},{"_22":1408,"_24":38,"_39":1409,"_41":1410},{"_22":1405,"_24":38,"_39":1406,"_41":1407},{"_22":1402,"_24":38,"_39":1403,"_41":1404},"de827ca16482",[]," som du kan style med props og design tokens.","ddcf8af79166",[253],"","5308f34f3e3d",[]," eller et ","58205eb0580c",[253],"

","1c496f3f4575",[],"Box er en ganske spesiell komponent. Du kan tenke på den som en ","ca57bd136cf5",[1420],[],{"_22":1421,"_24":38,"_39":1422,"_41":335},"cc3b0c79dd17",[],"b00092d4a34d","import { Box } from \"@vygruppen/spor-react\";","import { Box } from \"app/spor\";","389fe7cca666",[1428],{"_22":1429,"_24":29,"_30":1430,"_32":1431,"_34":35},"9ed7d04d6a0f",[1432],[],{"_22":1433,"_24":38,"_39":1434,"_41":1435},"36d7812315d9",[],"Box er grunnpillaren til alle komponentene i Spor.","811c9821-6f35-4b10-9c11-7bc2e6061619",{"_24":128,"_129":1440},"badge","Badge",{"_131":1441,"_24":133},"image-f8ef37841cd61693394ca49b0db8764531a30032-292x159-svg","cf01940c-299d-4d38-8884-a36b798c114a",{"_24":128,"_129":1446},"autocomplete-new-combobox","Autocomplete (New Combobox)",{"_131":1447,"_24":133},"image-1b01136831bf5c2d457efde56e984665a61ff6fa-350x197-svg","0d598d86-14fd-40e0-83dd-bd7c6a5f7d44","a0e1ecf4-1bc7-4752-959a-76b546810e90",{"_24":128,"_129":1453},"attached-inputs","AttachedInputs",{"_131":1454,"_24":133},"image-fc09645cd1a3732ca66ff973343f8bff310d9764-351x191-svg","f9c110fd-a553-4519-a07a-da85f0104f1c",{"_24":128,"_129":1459},"alert","Alert",{"_131":1460,"_24":133},"image-16bb04c8596ddd47c5456bd5e899092ee617b641-292x159-svg","3efca022-8d1c-4c54-bcfe-3148bd7fc0f5",{"_24":128,"_129":1465},"accordion","Accordion",{"_131":1466,"_24":133},"image-c0021b967eee5cdd4887b7d1b951fe7eda8981a0-292x159-svg","initialSanityData",{"_1487":1488,"_1489":1490,"_1491":1492},"cookies","brand","isMac",false,"domain","pr-9649c0a8f9914eecaaebb509aec7812a.ecs.eu-west-1.on.aws","isPreview","preview","ENV",{"_1482":1483,"_1484":1481,"_1485":1486},"readToken","env","test","PUBLIC_SANITY_PROJECT_ID","r4xpzxak","PUBLIC_SANITY_DATASET","PUBLIC_SANITY_STUDIO_URL","http://localhost:4444","menus",[1601,1602,1603,1604,1605],"sections",[1595,1596,1597],"siteSettings",{"_1493":1494,"_1495":1496,"_1497":1498,"_1499":1500,"_19":1501,"_1502":1503},"description","Spor is Vy's design system. This website documents what it is, how to use it, code examples and all you need to get started.","footerItems",[1529,1530,1531],"keywords",[1526,1527,1528],"socialImage",{"_24":128,"_129":1524},"Vy Designmanual","topMenu",[1504,1505,1506],{"_15":1519,"_24":1508,"_243":244,"_1509":1520,"_121":1521,"_19":1522},{"_15":1515,"_24":1508,"_243":1472,"_1509":11,"_121":1516,"_19":1517},{"_15":1507,"_24":1508,"_243":1472,"_1509":1510,"_121":1511,"_19":1512},"0e946e2a-fef1-4f74-b29b-214b45ccbc59","section","icon","bus",{"_24":121,"_1513":1514},"Ressurser","current","ressurser","58a16a6e-3f98-477f-9582-db4a215ca08c",{"_24":121,"_1513":1518},"Spor","spor","5673a4b9-a303-4a41-9806-a07b14530b94","edit",{"_24":121,"_1513":1523},"Identitet","identitet",{"_131":1525,"_24":133},"image-082df59aadc56c4e60dc56092cb46944a9de092b-963x643-svg","vy","design system","component library",{"_22":1571,"_24":1533,"_1493":1572,"_19":1512},{"_22":1553,"_24":1533,"_1493":1554,"_19":1555},{"_22":1532,"_24":1533,"_1493":1534,"_19":1535},"9851199556bb","footerItem",[1536],"Spor utvikling",{"_22":1537,"_24":29,"_30":1538,"_32":1539,"_34":35},"c678cf44b2f0",[1545,1546],[1540],{"_22":1541,"_24":1542,"_1543":1544},"c3ffbd8f7b3f","link","href","mailto:maren.kjensli@vy.no",{"_22":1550,"_24":38,"_39":1551,"_41":1552},{"_22":1547,"_24":38,"_39":1548,"_41":1549},"9f099121ea41",[1541],"maren.kjensli@vy.no","6c20e3b8af96",[],"Maren Kjensli\n","e520e7e7919c",[1556],"Spor ansvarlig",{"_22":1557,"_24":29,"_30":1558,"_32":1559,"_34":35},"40d1f001b896",[1563,1564],[1560],{"_22":1561,"_24":1542,"_1543":1562},"f7a5d57de184","mailto:esben.aasgaard@vy.no",{"_22":1568,"_24":38,"_39":1569,"_41":1570},{"_22":1565,"_24":38,"_39":1566,"_41":1567},"f9c861c1ded5",[1561],"esben.aasgaard@vy.no","1b86650e0f1f",[],"Esben Aasgaard\n","5d0e8058065d",[1573,1574],{"_22":1581,"_24":29,"_30":1582,"_32":1583,"_34":35},{"_22":1575,"_24":29,"_30":1576,"_32":1577,"_34":35},"4f9c1012d900",[1578],[],{"_22":1579,"_24":38,"_39":1580,"_41":238},"67b74564d15e",[],"bc0359d78906",[1587,1588],[1584],{"_22":1585,"_24":1542,"_1543":1586},"234f0127a401","mailto:mathias.aanmoen@vy.no",{"_22":1592,"_24":38,"_39":1593,"_41":1594},{"_22":1589,"_24":38,"_39":1590,"_41":1591},"0b3546c1ee18",[1585],"mathias.aanmoen@vy.no","99eec099ff40",[],"Mathias Aanmoen\n",{"_15":1507,"_24":1508,"_243":1472,"_1509":1510,"_121":1600,"_19":1512},{"_15":1519,"_24":1508,"_243":244,"_1509":1520,"_121":1599,"_19":1522},{"_15":1515,"_24":1508,"_243":1472,"_1509":11,"_121":1598,"_19":1517},{"_24":121,"_1513":1518},{"_24":121,"_1513":1523},{"_24":121,"_1513":1514},{"_1606":2354,"_1608":2355,"_121":2356},{"_1606":2320,"_1608":2321,"_121":2094},{"_1606":2113,"_1608":2114,"_121":1610},{"_1606":2092,"_1608":2093,"_121":2094},{"_1606":1607,"_1608":1609,"_121":1610},"menuItems",[1611,1612,1613,1614,1615,1616,1617,1618,1619,1620,1621],"relatedTo",{"_24":1508,"_121":1518,"_19":1517},"side-menu-spor",{"_24":1622,"_1542":-5,"_1623":2046,"_19":2047,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":1965,"_19":1966,"_1626":-5},{"_24":242,"_1542":-5,"_1623":-5,"_19":-5,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":1922,"_19":1923,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":1818,"_19":1819,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":1742,"_19":1743,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":1716,"_19":1717,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":1669,"_19":1670,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":1658,"_19":1659,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":1640,"_19":1641,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":1624,"_19":1625,"_1626":-5},"menuItem","subItems",[1627,1628],"Modals and dialogs","url",{"_1629":1631,"_19":709,"_1626":1632},{"_1629":-5,"_19":703,"_1626":1630},"tags","/spor/components/drawer",[1633,1634,1635,1636,1637,1638,1639],"/spor/components/dialog","Modal","ModalOverlay","ModalContent","ModalCloseButton","ModalHeader","ModalBody","ModalFooter",[1642,1643,1644],"Typography",{"_1629":1655,"_19":170,"_1626":1656},{"_1629":1651,"_19":654,"_1626":1652},{"_1629":1645,"_19":473,"_1626":1646},[1647,1648,1649,1650],"/spor/components/lists","list","ol","ul","li",[1653,653,1654],"/spor/components/heading","textStyle","header",[41,1657],"/spor/components/text","paragraph",[1660],"Travel",{"_1629":1661,"_19":1662,"_1626":1663},[1664,1665,1666,1667,1668],"LineTag","/spor/components/line-tags","info tag","travel tag","modality","line tag","line icon",[1671,1672,1673,1674,1675,1676,1677,1678,1679,1680],"Layout",{"_1629":1713,"_19":659,"_1626":1714},{"_1629":1711,"_19":405,"_1626":1712},{"_1629":1709,"_19":208,"_1626":1710},{"_1629":-5,"_19":375,"_1626":1708},{"_1629":1703,"_19":1271,"_1626":1704},{"_1629":-5,"_19":495,"_1626":1702},{"_1629":1697,"_19":1464,"_1626":1698},{"_1629":1693,"_19":215,"_1626":1694},{"_1629":1682,"_19":190,"_1626":1683},{"_1629":-5,"_19":357,"_1626":1681},"/spor/components/separator",[190,1684,1685,1686,1687,1688,1689,1690,1691,1692],"/spor/components/table","Thead","Tbody","Tfoot","Tr","Th","Td","TableCaption","TableContainer","Spreadsheet",[214,1695,1696],"/spor/components/stack","stabel","mellomrom",[1463,1699,1700,1701],"/spor/components/accordion","collapsable","trekkspill","vis og skjul","/spor/components/image",[1705,1706,1707],"/spor/components/box","boks","div","View","/spor/components/radiocard",[780,207],"/spor/components/staticcard",[780,404],"/spor/components/pressablecard",[565,1715],"/spor/components/grid","GridItem",[1718,1719,1720,1721],"Navigation",{"_1629":1735,"_19":1264,"_1626":1736},{"_1629":1729,"_19":1730,"_1626":1731},{"_1629":1723,"_19":202,"_1626":1724},{"_1629":-5,"_19":428,"_1626":1722},"/spor/components/pagination",[201,1725,1726,1727,1728],"/spor/components/stepper","navigasjon","steg","wizard","guide",[1732,1733,1734],"Tab","/spor/components/tabs","faner","segmented control","tab panel",[1737,1725,1738,1739,1740,1741],"/spor/components/breadcrumb","brødsmuler","nav","bread","baguette","panko",[1744,1745,1746,1747,1748,1749,1750,1751,1752,1753,1754,1755,1756],"Feedback and loading",{"_1629":1812,"_19":1458,"_1626":1813},{"_1629":1808,"_19":1439,"_1626":1809},{"_1629":1803,"_19":1804,"_1626":1805},{"_1629":1798,"_19":1799,"_1626":1800},{"_1629":1796,"_19":440,"_1626":1797},{"_1629":1790,"_19":1791,"_1626":1792},{"_1629":1784,"_19":411,"_1626":1785},{"_1629":1780,"_19":399,"_1626":1781},{"_1629":1777,"_19":387,"_1626":1778},{"_1629":1772,"_19":393,"_1626":1773},{"_1629":1767,"_19":1768,"_1626":1769},{"_1629":1762,"_19":345,"_1626":1763},{"_1629":1757,"_19":146,"_1626":1758},[1759,145,1760,1761],"/spor/components/toast","snackbar","tilbakemelding","feedback",[1764,1765,1766],"/spor/components/spinner","snurrebass","laster","loading",[1770,1771,1766],"Skeleton","/spor/components/skeletons","skeleton","placeholder",[1774,1775,1776],"/spor/components/progress-indicator","Dots","progress","indicator",[1779,1765,1766],"/spor/components/progress-loader","fremgang",[1782,1775,1783,1766],"/spor/components/progress-bar","fremdrift","last",[410,136,1786,1787,1788,1789],"/spor/components/popover","ui feedback","overlay","interactive content","popup",[1727,439,122,1793,1794,1795,1728],"Nudge - Wizard","/spor/components/wizard-nudge","tips","pages","steps",[439,410,1728,1793],"/spor/components/nudge",[1801,1802,344,1766],"FullScreenLoader","/spor/components/full-screen-loader","full screen","vy logo",[1806,344,1766,1807],"ContentLoader","/spor/components/content-loader","content loader","vente",[1438,1810,1811],"/spor/components/badge","tag","label",[1814,1815,1816,1817],"/spor/components/alert","infomelding","message box","expandable alert","closable alert",[1820,1821,1822,1823,1824,1825,1826,1827,1828,1829,1830,1831,1832,1833,1834,1835,1836,1837],"Form",{"_1629":1919,"_19":489,"_1626":1920},{"_1629":1916,"_19":369,"_1626":1917},{"_1629":1911,"_19":422,"_1626":1912},{"_1629":1902,"_19":416,"_1626":1903},{"_1629":1898,"_19":158,"_1626":1899},{"_1629":1892,"_19":1893,"_1626":1894},{"_1629":1888,"_19":152,"_1626":1889},{"_1629":1886,"_19":445,"_1626":1887},{"_1629":1881,"_19":363,"_1626":1882},{"_1629":1878,"_19":775,"_1626":1879},{"_1629":1873,"_19":727,"_1626":1874},{"_1629":1869,"_19":381,"_1626":1870},{"_1629":1867,"_19":769,"_1626":1868},{"_1629":1862,"_19":196,"_1626":1863},{"_1629":1855,"_19":746,"_1626":1856},{"_1629":1850,"_19":1452,"_1626":1851},{"_1629":1844,"_19":434,"_1626":1845},{"_1629":1838,"_19":1839,"_1626":-5},[1840,726,1841,1842,1843],"Autocomplete ( new combobox ) ","autocomplete","listbox","travelsearch","search",[201,1846,1847,1848,1849],"/spor/components/numeric-stepper","billett","plus","minus","counter",[1852,488,1853,1854],"/spor/components/attached-inputs","attached","combine","kombiner",[1857,1858,1859,1860,1861],"/spor/components/choice-chip","choice chips","valgknapp","filter chip","icon chip","choicechip",[1864,195,1865,1866],"/spor/components/switch","toggle","valg","binær",[768,1865],"/spor/components/checkbox",[1871,1872,1865],"/spor/components/radio","radio buttons","choice",[726,1840,1875,1876,1877,1508],"/spor/components/combobox","autosuggest","item","filter",[780,1880,362,410],"/spor/components/card-select","kort",[1883,1884,362,1885],"/spor/components/select","nedtrekksliste","dropdown","info",[1884,726,362],"/spor/components/native-select",[151,1890,1891],"/spor/components/timepicker","tidsvelger","tid",[1895,714,1891,1896,1897],"DatePicker","/spor/components/datepicker","date","date picker","datovelger",[157,1900,1901],"/spor/components/textarea","tekstområde","lang tekst",[1904,1905,1906,1907,1908,1909,1910],"/spor/components/phone-number-input","telefon","mobil","phone","number","telegraf","country code","landkode",[1913,1914,1915],"/spor/components/password-input","passord","sikkerhet","password",[1843,1918],"/spor/components/search-input","søk",[1921,488],"/spor/components/input","tekstfelt",[1924,1925,1926,1927,1928,1929,1930],"Buttons and links",{"_1629":1962,"_19":803,"_1626":1963},{"_1629":1960,"_19":648,"_1626":1961},{"_1629":1954,"_19":739,"_1626":1955},{"_1629":1949,"_19":1950,"_1626":1951},{"_1629":1944,"_19":957,"_1626":1945},{"_1629":1939,"_19":164,"_1626":1940},{"_1629":1931,"_19":460,"_1626":1932},[1933,1934,1935,1936,1937,1938],"/spor/components/media-controllers","media","play","pause","skip","jump","spol",[1542,1543,1941,1942,1943],"/spor/components/text-link","a","anker","anchor",[802,1946,1947,1948],"/spor/components/button-group","knapp","group","gruppering",[1952,1953],"FloatingActionButton","/spor/components/floating-action-button","fab","kontroll",[1956,1957,1958,1946,1959],"/spor/components/close-button","lukk","steng","fjern","ikon",[1509,1959,1946],"/spor/components/icon-button",[802,1964,1946],"/spor/components/button","action",[1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981],"Getting started",{"_1629":2041,"_19":2042,"_1626":2043},{"_1629":-5,"_19":2039,"_1626":2040},{"_1629":-5,"_19":2037,"_1626":2038},{"_1629":2033,"_19":2034,"_1626":2035},{"_1629":-5,"_19":2031,"_1626":2032},{"_1629":-5,"_19":2029,"_1626":2030},{"_1629":-5,"_19":2027,"_1626":2028},{"_1629":2020,"_19":2021,"_1626":2022},{"_1629":2015,"_19":2016,"_1626":2017},{"_1629":2009,"_19":2010,"_1626":2011},{"_1629":2002,"_19":2003,"_1626":2004},{"_1629":1996,"_19":1997,"_1626":1998},{"_1629":1991,"_19":1992,"_1626":1993},{"_1629":1987,"_19":1988,"_1626":1989},{"_1629":1982,"_19":1983,"_1626":1984},[1985,1986],"Using spor eslint-package","/spor/guides/using-spor-eslint-package","eslint","lint",[1481,1990],"How to test Spor locally","/spor/guides/how-to-test-spor-locally","locally",[1994,1995],"How to write tests","/spor/guides/how-to-write-tests","testing","tdd",[1959,1999,2000,2001],"How to add new icons","/spor/guides/how-to-add-new-icons","icons","add new","tech",[2005,2006,2007,2008],"Web Accessibility Guide","/spor/guides/accessibility-tech","universell utforming","uu","a11y","accessibility",[2012,2013,2014,2001],"Releasing new versions","/spor/guides/releasing-new-versions","release","changeset","semver",[2018,2019],"Using color tokens and mode","/spor/guides/using-color-tokens-and-mode","color","mode",[2023,2024,2025,2026],"How to Create a React Native Xomponent","/spor/guides/how-to-create-new-react-native-components","react native","app","ios","android","How to Create a React Component","/spor/guides/how-to-create-a-react-component","Component Development","/spor/guides/component-development","Contribute to Spor","/spor/guides/how-to-contribute",[2036],"Spor Version 1","https://spor-v1.test.vylabs.io/","spor1","Migration","/spor/guides/migration","Setting Up Spor in Your Project","/spor/guides/setting-up-spor-in-react",[2044,2045],"Introduction","/spor/guides/introduction","intro","start",[2048,2049,2050,2051,2052,2053,2054,2055,2056,2057],"Fundamentals",{"_1629":2088,"_19":2089,"_1626":2090},{"_1629":-5,"_19":2086,"_1626":2087},{"_1629":-5,"_19":2084,"_1626":2085},{"_1629":-5,"_19":2082,"_1626":2083},{"_1629":-5,"_19":2080,"_1626":2081},{"_1629":-5,"_19":1670,"_1626":2079},{"_1629":-5,"_19":2077,"_1626":2078},{"_1629":-5,"_19":2075,"_1626":2076},{"_1629":2066,"_19":2067,"_1626":2068},{"_1629":2058,"_19":2059,"_1626":2060},[2061,2062,2063,2064,2065],"Accessibility","/spor/fundamentals/accessibility","UU","WCAG","WAD","Krav","Regler",[2069,2070,2071,2072,2073,2074],"Illustration style","/spor/fundamentals/illustration-style","Illustrasjon","illustration","drawing","tegning","farger","ikoner","Icons","/spor/fundamentals/icons","Animation","/spor/fundamentals/animation","/spor/fundamentals/layout","Styles and effects","/spor/fundamentals/effects-and-styles","States","/spor/fundamentals/states","Colors","/spor/fundamentals/colors","What are design tokens?","/spor/fundamentals/what-are-design-tokens",[2091,2044],"The design process","/spor/resources/the-design-process","onboarding",[2095,2096,2097,2098,2099,2100],{"_24":1508,"_121":1523,"_19":1522},"side-menu-identitet",{"_24":1622,"_1542":2111,"_1623":-5,"_19":2112,"_1626":-5},{"_24":1622,"_1542":2109,"_1623":-5,"_19":2110,"_1626":-5},{"_24":1622,"_1542":2107,"_1623":-5,"_19":2108,"_1626":-5},{"_24":1622,"_1542":2105,"_1623":-5,"_19":2106,"_1626":-5},{"_24":1622,"_1542":2103,"_1623":-5,"_19":2104,"_1626":-5},{"_24":1622,"_1542":2101,"_1623":-5,"_19":2102,"_1626":-5},"/identitet/illustrasjoner","Illustrasjoner","/identitet/fotografi","Bildestil","/identitet/typografi","Typografi","/identitet/farger","Farger","/identitet/logoen-var","Logo","/identitet/merkevaren-vy","Merkevaren Vy",[2115,2116,2117,2118,2119,2120,2121,2122,2123,2124,2125,2126],{"_24":1508,"_121":1518,"_19":1517},{"_24":1622,"_1542":-5,"_1623":2306,"_19":2047,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2279,"_19":1966,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2263,"_19":2031,"_1626":-5},{"_24":242,"_1542":-5,"_1623":-5,"_19":-5,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2248,"_19":1923,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2198,"_19":1819,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2169,"_19":1743,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2161,"_19":1717,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2141,"_19":1670,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2138,"_19":1659,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2131,"_19":1641,"_1626":-5},{"_24":1622,"_1542":-5,"_1623":2127,"_19":1625,"_1626":-5},[2128,2129],{"_1629":2130,"_19":709,"_1626":1632},{"_1629":-5,"_19":703,"_1626":1630},[1633,1634,1635,1636,1637,1638,1639],[2132,2133,2134],{"_1629":2137,"_19":170,"_1626":1656},{"_1629":2136,"_19":654,"_1626":1652},{"_1629":2135,"_19":473,"_1626":1646},[1647,1648,1649,1650],[1653,653,1654],[41,1657],[2139],{"_1629":2140,"_19":1662,"_1626":1663},[1664,1665,1666,1667,1668],[2142,2143,2144,2145,2146,2147,2148,2149,2150,2151,2152],{"_1629":2160,"_19":659,"_1626":1714},{"_1629":2159,"_19":405,"_1626":1712},{"_1629":2158,"_19":208,"_1626":1710},{"_1629":-5,"_19":375,"_1626":1708},{"_1629":2157,"_19":1271,"_1626":1704},{"_1629":-5,"_19":495,"_1626":1702},{"_1629":2156,"_19":1464,"_1626":1698},{"_1629":2155,"_19":215,"_1626":1694},{"_1629":2154,"_19":190,"_1626":1683},{"_1629":-5,"_19":357,"_1626":1681},{"_1629":-5,"_19":733,"_1626":2153},"/spor/components/collapsible",[190,1684,1685,1686,1687,1688,1689,1690,1691,1692],[214,1695,1696],[1463,1699,1700,1701],[1705,1706,1707],[780,207],[780,404],[565,1715],[2162,2163,2164,2165],{"_1629":2168,"_19":1264,"_1626":1736},{"_1629":2167,"_19":1730,"_1626":1731},{"_1629":2166,"_19":202,"_1626":1724},{"_1629":-5,"_19":428,"_1626":1722},[201,1725,1726,1727,1728],[1732,1733,1734],[1737,1725,1738,1739,1740,1741],[2170,2171,2172,2173,2174,2175,2176,2177,2178,2179,2180,2181,2182,2183],{"_1629":2197,"_19":1458,"_1626":1813},{"_1629":2196,"_19":1439,"_1626":1809},{"_1629":2195,"_19":1804,"_1626":1805},{"_1629":2194,"_19":1799,"_1626":1800},{"_1629":2193,"_19":440,"_1626":1797},{"_1629":2192,"_19":1791,"_1626":1792},{"_1629":2191,"_19":411,"_1626":1785},{"_1629":-5,"_19":137,"_1626":2190},{"_1629":2189,"_19":399,"_1626":1781},{"_1629":2188,"_19":387,"_1626":1778},{"_1629":2187,"_19":393,"_1626":1773},{"_1629":2186,"_19":1768,"_1626":1769},{"_1629":2185,"_19":345,"_1626":1763},{"_1629":2184,"_19":146,"_1626":1758},[1759,145,1760,1761],[1764,1765,1766],[1770,1771,1766],[1774,1775,1776],[1779,1765,1766],[1782,1775,1783,1766],"/spor/components/tooltip",[410,136,1786,1787,1788,1789],[1727,439,122,1793,1794,1795,1728],[439,410,1728,1793],[1801,1802,344,1766],[1806,344,1766,1807],[1438,1810,1811],[1814,1815,1816,1817],[2199,2200,2201,2202,2203,2204,2205,2206,2207,2208,2209,2210,2211,2212,2213,2214,2215,2216,2217,2218,2219],{"_1629":2245,"_19":2246,"_1626":2247},{"_1629":2244,"_19":489,"_1626":1920},{"_1629":2243,"_19":369,"_1626":1917},{"_1629":2242,"_19":422,"_1626":1912},{"_1629":2241,"_19":416,"_1626":1903},{"_1629":2240,"_19":158,"_1626":1899},{"_1629":2239,"_19":1893,"_1626":1894},{"_1629":2238,"_19":152,"_1626":1889},{"_1629":2237,"_19":445,"_1626":1887},{"_1629":2236,"_19":363,"_1626":1882},{"_1629":2235,"_19":775,"_1626":1879},{"_1629":2234,"_19":727,"_1626":1874},{"_1629":2233,"_19":381,"_1626":1870},{"_1629":2232,"_19":769,"_1626":1868},{"_1629":2231,"_19":196,"_1626":1863},{"_1629":2230,"_19":746,"_1626":1856},{"_1629":2228,"_19":694,"_1626":2229},{"_1629":2225,"_19":484,"_1626":2226},{"_1629":2224,"_19":1452,"_1626":1851},{"_1629":2223,"_19":434,"_1626":1845},{"_1629":2220,"_19":450,"_1626":2221},[449,1884,2222],"/spor/components/menu","navigation",[201,1846,1847,1848,1849],[1852,488,1853,1854],[1810,483,2227],"/spor/components/inputchip","chip",[1877,1872,2227],"/spor/components/filter-chip",[1857,1858,1859,1860,1861],[1864,195,1865,1866],[768,1865],[1871,1872,1865],[726,1840,1875,1876,1877,1508],[780,1880,362,410],[1883,1884,362,1885],[1884,726,362],[151,1890,1891],[1895,714,1891,1896,1897],[157,1900,1901],[1904,1905,1906,1907,1908,1909,1910],[1913,1914,1915],[1843,1918],[1921,488],[1840,726,1841,1843],"Autocomplete (new combobox) ","/spor/components/autocomplete-new-combobox",[2249,2250,2251,2252,2253,2254,2255],{"_1629":2262,"_19":803,"_1626":1963},{"_1629":2261,"_19":648,"_1626":1961},{"_1629":2260,"_19":739,"_1626":1955},{"_1629":2259,"_19":1950,"_1626":1951},{"_1629":2258,"_19":957,"_1626":1945},{"_1629":2257,"_19":164,"_1626":1940},{"_1629":2256,"_19":460,"_1626":1932},[1933,1934,1935,1936,1937,1938],[1542,1543,1941,1942,1943],[802,1946,1947,1948],[1952,1953],[1956,1957,1958,1946,1959],[1509,1959,1946],[802,1964,1946],[2264,2265,2266,2267,2268,2269,2270,2271],{"_1629":-5,"_19":2278,"_1626":2032},{"_1629":-5,"_19":2277,"_1626":2030},{"_1629":-5,"_19":2276,"_1626":2028},{"_1629":-5,"_19":2275,"_1626":2022},{"_1629":-5,"_19":2274,"_1626":1998},{"_1629":-5,"_19":2273,"_1626":1993},{"_1629":-5,"_19":2272,"_1626":1989},{"_1629":-5,"_19":2010,"_1626":2011},"Testing Spor locally","Writing tests","Adding icons","Creating a React Native component","Creating a React component","Component development","How to contribute",[2280,2281,2282,2283,2284,2285,2286,2287,2288,2289],{"_1629":2305,"_19":2042,"_1626":2043},{"_1629":2300,"_19":2301,"_1626":2302},{"_1629":-5,"_19":2039,"_1626":2040},{"_1629":2299,"_19":2016,"_1626":2017},{"_1629":2298,"_19":2003,"_1626":2004},{"_1629":-5,"_19":2296,"_1626":2297},{"_1629":2295,"_19":1983,"_1626":1984},{"_1629":-5,"_19":2293,"_1626":2294},{"_1629":-5,"_19":2037,"_1626":2038},{"_1629":2290,"_19":2291,"_1626":2035},[2292],"Spor version 1","Spor1","Using spor-codemods","/spor/guides/using-spor-codemods",[1985,1986],"Customising Styles","/spor/guides/customising-component-styles",[2005,2006,2007,2008],[2018,2019],[1518,2303,2304],"Spor MCP Server","/spor/guides/spor-mcp-server","mcp","server",[2044,2045],[2307,2308,2309,2310,2311,2312,2313,2314,2315,2316],{"_1629":2319,"_19":2089,"_1626":2090},{"_1629":-5,"_19":2086,"_1626":2087},{"_1629":-5,"_19":2084,"_1626":2085},{"_1629":-5,"_19":2082,"_1626":2083},{"_1629":-5,"_19":2080,"_1626":2081},{"_1629":-5,"_19":1670,"_1626":2079},{"_1629":-5,"_19":2077,"_1626":2078},{"_1629":-5,"_19":2075,"_1626":2076},{"_1629":2318,"_19":2067,"_1626":2068},{"_1629":2317,"_19":2059,"_1626":2060},[2061,2062,2063,2064,2065],[2069,2070,2071,2072,2073,2074],[2091,2044],[2322,2323,2324,2325,2326,2327,2328,2329,2330,2331,2332,2333,2334,2335,2336],{"_24":1508,"_121":1523,"_19":1522},{"_24":1622,"_1542":2111,"_1623":-5,"_19":2112,"_1626":-5},{"_24":1622,"_1542":2109,"_1623":-5,"_19":2110,"_1626":-5},{"_24":1622,"_1542":2107,"_1623":-5,"_19":2108,"_1626":-5},{"_24":1622,"_1542":2105,"_1623":-5,"_19":2106,"_1626":-5},{"_24":1622,"_1542":2103,"_1623":-5,"_19":2353,"_1626":-5},{"_24":1622,"_1542":2101,"_1623":-5,"_19":2102,"_1626":-5},{"_24":1622,"_1542":2351,"_1623":-5,"_19":2352,"_1626":-5},{"_24":1622,"_1542":2349,"_1623":-5,"_19":2350,"_1626":-5},{"_24":1622,"_1542":2347,"_1623":-5,"_19":2348,"_1626":-5},{"_24":1622,"_1542":2345,"_1623":-5,"_19":2346,"_1626":-5},{"_24":242,"_1542":-5,"_1623":-5,"_19":-5,"_1626":-5},{"_24":1622,"_1542":2343,"_1623":-5,"_19":2344,"_1626":-5},{"_24":1622,"_1542":2341,"_1623":-5,"_19":2342,"_1626":-5},{"_24":1622,"_1542":2339,"_1623":-5,"_19":2340,"_1626":-5},{"_24":1622,"_1542":2337,"_1623":-5,"_19":2338,"_1626":-5},"/identitet/cargonet","CargoNet","/identitet/interior","Interiør","/identitet/skilting","Skilting","/identitet/kjoretoy","Kjøretøy","/identitet/sprakprofil","Språkprofil","/identitet/identiteten-i-bruk","Identiteten i bruk","/identitet/grafisk-element","Grafisk element","/identitet/ikoner","Ikoner","Fotografi",[2357,2358,2359,2360,2361],{"_24":1508,"_121":1514,"_19":1512},"side-menu-ressurser",{"_24":1622,"_1542":2370,"_1623":-5,"_19":2371,"_1626":2370},{"_24":1622,"_1542":2368,"_1623":-5,"_19":2369,"_1626":2368},{"_24":1622,"_1542":2366,"_1623":-5,"_19":2367,"_1626":2366},{"_24":1622,"_1542":2364,"_1623":-5,"_19":2365,"_1626":2364},{"_24":1622,"_1542":2362,"_1623":-5,"_19":2363,"_1626":2362},"https://design.vy.no/ressurser/design-tokens","Design tokens","https://design.vy.no/playground","Playground","https://design.vy.no/ressurser/illustration-library","Illustrasjonbibliotek","https://design.vy.no/ressurser/icon-library","Ikonbibliotek","https://vyintern.imageshop.no/117895","Bildebank"]

Fundamentals

Getting started

Contribute to Spor

Buttons and links

Form

Feedback and loading

Navigation

Layout

Travel

Typography

Modals and dialogs

Component overview

Accordion

Alert

AttachedInputs

Autocomplete (New Combobox)

Autocomplete (New Combobox)

Badge

Box

Breadcrumb

Button

Button Group

Calendar

Calendar

Card (deprecated)

CardSelect

Checkbox

Choice chip (new)

ChoiceChip

CloseButton

Collapsible

Combobox

Content loader

Datepicker

Dialog

Drawer

ErrorSummary

Filter Chip

FilterChip

FilterChip and ChoiceChip

Floating Action Button

FormControl

Full screen loader

Grid

Heading

IconButton

Image

Input

InputChip

InputChip

Line tags

Lists

MediaController

Menu

Menu

NativeSelect

Nudge

NumericStepper

Pagination

PasswordInput

PhoneNumberInput

Popover

PressableCard

ProgressBar

ProgressIndicator

ProgressLoader

Radio

RadioCard

SearchInput

Select

Separator

Skeletons

Spinner

Stack

StaticCard

Stepper

Switch

Table

Tabs

Text