[{"_1":2,"_375":-5,"_376":-5},"loaderData",{"_3":4,"_42":-7,"_43":44,"_207":208},"root",{"_5":6,"_7":8,"_29":30},"lang","en","menu",[9,14,17,20,23,26],{"_10":11,"_12":13},"name","navigation.fundamentals","href","/en/fundamentals",{"_10":15,"_12":16},"navigation.best-practices","/en/best-practices",{"_10":18,"_12":19},"navigation.patterns","/en/patterns",{"_10":21,"_12":22},"navigation.blog","/en/blog",{"_10":24,"_12":25},"navigation.components","/en/components",{"_10":27,"_12":28},"navigation.theme-builder","https://theme.designsystemet.no/en","centerLinks",[31,36,39],{"_32":33,"_34":35},"text","footer.about","url","en/fundamentals/introduction/about-the-design-system",{"_32":37,"_34":38},"footer.privacy","en/fundamentals/privacy-policy",{"_32":40,"_34":41},"footer.accessibility","https://uustatus.no/nb/erklaringer/publisert/faeb324d-9b3f-40b0-b715-92cac356a916","layouts/root/layout","layouts/components/layout",{"_5":6,"_45":46,"_204":205},"cats",{"_47":48,"_63":64,"_170":171,"_184":185},"getStarted",[49,55,59],{"_50":51,"_34":52,"_53":54},"title","Changelog","/en/components/changelog","order",1,{"_50":56,"_34":57,"_53":58},"React","/en/components/get-started/react",40,{"_50":60,"_34":61,"_53":62},"CSS","/en/components/get-started/css",50,"components",[65,68,71,74,77,80,83,86,89,92,95,98,101,104,107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152,155,158,161,164,167],{"_50":66,"_34":67},"Alert","/en/components/docs/alert",{"_50":69,"_34":70},"Avatar","/en/components/docs/avatar",{"_50":72,"_34":73},"Badge","/en/components/docs/badge",{"_50":75,"_34":76},"Breadcrumbs","/en/components/docs/breadcrumbs",{"_50":78,"_34":79},"Button","/en/components/docs/button",{"_50":81,"_34":82},"Card","/en/components/docs/card",{"_50":84,"_34":85},"Checkbox","/en/components/docs/checkbox",{"_50":87,"_34":88},"Chip","/en/components/docs/chip",{"_50":90,"_34":91},"Details","/en/components/docs/details",{"_50":93,"_34":94},"Dialog","/en/components/docs/dialog",{"_50":96,"_34":97},"Divider","/en/components/docs/divider",{"_50":99,"_34":100},"Dropdown","/en/components/docs/dropdown",{"_50":102,"_34":103},"ErrorSummary","/en/components/docs/error-summary",{"_50":105,"_34":106},"Field","/en/components/docs/field",{"_50":108,"_34":109},"Fieldset","/en/components/docs/fieldset",{"_50":111,"_34":112},"Input","/en/components/docs/input",{"_50":114,"_34":115},"Link","/en/components/docs/link",{"_50":117,"_34":118},"List","/en/components/docs/list",{"_50":120,"_34":121},"Pagination","/en/components/docs/pagination",{"_50":123,"_34":124},"Popover","/en/components/docs/popover",{"_50":126,"_34":127},"Radio","/en/components/docs/radio",{"_50":129,"_34":130},"Search","/en/components/docs/search",{"_50":132,"_34":133},"Select","/en/components/docs/select",{"_50":135,"_34":136},"Skeleton","/en/components/docs/skeleton",{"_50":138,"_34":139},"SkipLink","/en/components/docs/skip-link",{"_50":141,"_34":142},"Spinner","/en/components/docs/spinner",{"_50":144,"_34":145},"Suggestion","/en/components/docs/suggestion",{"_50":147,"_34":148},"Switch","/en/components/docs/switch",{"_50":150,"_34":151},"Table","/en/components/docs/table",{"_50":153,"_34":154},"Tabs","/en/components/docs/tabs",{"_50":156,"_34":157},"Tag","/en/components/docs/tag",{"_50":159,"_34":160},"Textarea","/en/components/docs/textarea",{"_50":162,"_34":163},"Textfield","/en/components/docs/textfield",{"_50":165,"_34":166},"ToggleGroup","/en/components/docs/toggle-group",{"_50":168,"_34":169},"Tooltip","/en/components/docs/tooltip","typography",[172,175,178,181],{"_50":173,"_34":174},"Heading","/en/components/docs/heading",{"_50":176,"_34":177},"Label","/en/components/docs/label",{"_50":179,"_34":180},"Paragraph","/en/components/docs/paragraph",{"_50":182,"_34":183},"ValidationMessage","/en/components/docs/validation-message","utilities",[186,190,194,198,201],{"_50":187,"_34":188,"_53":189},"RovingFocus","/en/components/utilities/roving-focus",10,{"_50":191,"_34":192,"_53":193},"useCheckboxGroup","/en/components/utilities/use-checkbox-group",20,{"_50":195,"_34":196,"_53":197},"useRadioGroup","/en/components/utilities/use-radio-group",30,{"_50":199,"_34":200,"_53":58},"usePagination","/en/components/utilities/use-pagination",{"_50":202,"_34":203,"_53":62},"useSynchronizedAnimation","/en/components/utilities/use-synchronized-animation","sidebarSuffix",{"_63":206,"_170":206},"/accessibility","components-page",{"_209":210,"_211":212,"_234":235,"_236":237,"_238":239,"_244":245,"_272":273,"_274":275,"_282":283,"_284":285,"_286":287,"_365":366,"_373":374},"component","pagination","stories",[213,219,222,225,228,231],{"_10":214,"_215":216,"_217":218},"Preview","code","const Preview = () => {\n return (\n \n \n \n \n Forrige\n \n \n\n \n \n 1\n \n \n\n \n \n 2\n \n \n\n \n\n \n \n 9\n \n \n\n \n \n 10\n \n \n\n \n \n Neste\n \n \n \n \n );\n};","file","pagination.stories.tsx",{"_10":220,"_215":221,"_217":218},"PreviewEn","const PreviewEn = () => {\n return (\n \n \n \n \n Previous\n \n \n\n \n \n 1\n \n \n\n \n \n 2\n \n \n\n \n\n \n \n 9\n \n \n\n \n \n 10\n \n \n\n \n \n Next\n \n \n \n \n );\n};",{"_10":223,"_215":224,"_217":218},"WithAnchor","const WithAnchor = () => {\n const [currentPage, setCurrentPage] = useState(2);\n const { pages, nextButtonProps, prevButtonProps } = usePagination({\n currentPage,\n setCurrentPage,\n totalPages: 10,\n showPages: 7,\n });\n\n return (\n \n \n \n \n Forrige\n \n \n {pages.map(({ page, itemKey, buttonProps }) => (\n \n {typeof page === 'number' && (\n \n {page}\n \n )}\n \n ))}\n \n \n Neste\n \n \n \n \n );\n};",{"_10":226,"_215":227,"_217":218},"WithAnchorEn","const WithAnchorEn = () => {\n const [currentPage, setCurrentPage] = useState(2);\n const { pages, nextButtonProps, prevButtonProps } = usePagination({\n currentPage,\n setCurrentPage,\n totalPages: 10,\n showPages: 7,\n });\n\n return (\n \n \n \n \n Previous\n \n \n {pages.map(({ page, itemKey, buttonProps }) => (\n \n {typeof page === 'number' && (\n \n {page}\n \n )}\n \n ))}\n \n \n Next\n \n \n \n \n );\n};",{"_10":229,"_215":230,"_217":218},"Mobile","const Mobile = () => {\n return (\n \n \n \n \n \n\n \n \n 2\n \n \n\n \n 3\n \n\n \n \n 4\n \n \n\n \n \n \n \n \n );\n};",{"_10":232,"_215":233,"_217":218},"MobileEn","const MobileEn = () => {\n return (\n \n \n \n \n \n\n \n \n 2\n \n \n\n \n 3\n \n\n \n \n 4\n \n \n\n \n \n \n \n \n );\n};","dodont",[],"mdxCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return t};var _=(t,e,o)=>(o=t!=null?p(f(t)):{},c(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>c(s({},\"__esModule\",{value:!0}),t);var d=g((v,a)=>{a.exports=_jsx_runtime});var k={};y(k,{default:()=>m,frontmatter:()=>j});var n=_(d()),j=void 0;function u(t){let e={a:\"a\",p:\"p\",...t.components},{Alert:o}=e;return o||w(\"Alert\",!0),(0,n.jsx)(o,{\"data-color\":\"info\",children:(0,n.jsxs)(e.p,{children:[\"We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on \",(0,n.jsx)(e.a,{href:\"https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml\",children:\"Github\"}),\" or \",(0,n.jsx)(e.a,{href:\"https://designsystemet.no/slack\",children:\"Slack\"}),\".\"]})})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}function w(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(k);})();\n;return Component;","metadata",{"_50":120,"_240":241,"_242":243},"subtitle","var Component=(()=>{var x=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var h=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!_.call(t,s)&&s!==n&&r(t,s,{get:()=>e[s],enumerable:!(c=l(e,s))||c.enumerable});return t};var b=(t,e,n)=>(n=t!=null?x(p(t)):{},a(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),g=t=>a(r({},\"__esModule\",{value:!0}),t);var d=h((D,i)=>{i.exports=_jsx_runtime});var w={};j(w,{default:()=>f,frontmatter:()=>M});var o=b(d()),M=void 0;function u(t){let e={code:\"code\",p:\"p\",...t.components};return(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"Pagination\"}),\" is a list of buttons used to navigate between different pages of content, such as search results or tables.\"]})}function f(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(u,{...t})}):u(t)}return g(w);})();\n;return Component;","image","Pagination.svg","linkMetadata",[246,248,252,256,258,260,263,265,267,270],{"_50":247},"Pagination - Designsystemet",{"_10":249,"_250":251},"description","content","`Pagination` is a list of buttons used to navigate between different pages of content, such as search results or tables.",{"_253":254,"_250":255},"property","og:image","/img/designsystemet-meta.png",{"_253":257,"_250":120},"og:title",{"_253":259,"_250":251},"og:description",{"_253":261,"_250":262},"og:url","https://designsystemet.no",{"_253":264,"_250":120},"twitter:title",{"_253":266,"_250":251},"twitter:description",{"_253":268,"_250":269},"twitter:card","summary_large_image",{"_253":271,"_250":255},"twitter:image","cssSource",".ds-pagination{--dsc-pagination-gap:var(--ds-size-2);--dsc-pagination-icon-size:var(--ds-size-6);--dsc-pagination-icon-url:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E\")}.ds-pagination :is(ol,ul){align-items:center;flex-wrap:wrap;gap:var(--dsc-pagination-gap);list-style:none;margin:0;padding:0}:is(.ds-pagination :is(ol,ul)):not([hidden]){display:flex}:is(.ds-pagination :is(ol,ul))>li>[aria-hidden=true]{visibility:hidden}:is(.ds-pagination :is(ol,ul))>li:first-child>:before,:is(.ds-pagination :is(ol,ul))>li:last-child>:before{background:currentcolor;content:\"\";height:var(--dsc-pagination-icon-size);-webkit-mask:center/contain no-repeat var(--dsc-pagination-icon-url);mask:center/contain no-repeat var(--dsc-pagination-icon-url);order:1;width:var(--dsc-pagination-icon-size)}@media (forced-colors:active){:is(.ds-pagination :is(ol,ul))>li:first-child>:before,:is(.ds-pagination :is(ol,ul))>li:last-child>:before{background:LinkText}}:is(.ds-pagination :is(ol,ul))>li:first-child>:before{order:0;rotate:180deg}:dir(rtl) :is(.ds-pagination :is(ol,ul))>li:first-child>:before{rotate:0deg}:dir(rtl) :is(.ds-pagination :is(ol,ul))>li:last-child>:before{rotate:180deg}:is(.ds-pagination :is(ol,ul))>li:empty:before{content:\"\\2026\";display:block;min-width:var(--ds-size-12);text-align:center}","cssVars",{"_276":277,"_278":279,"_280":281},"--dsc-pagination-gap","var(--ds-size-2)","--dsc-pagination-icon-size","var(--ds-size-6)","--dsc-pagination-icon-url","url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E\")","cssAttrs",{},"toc",[],"componentDocs",[288,329,337,351],{"_289":290,"_293":294,"_249":295,"_296":120,"_297":298,"_299":300},"tags",{"_291":292},"example","\n \n \n Forrige\n \n \n 1\n \n \n 2\n \n \n","filePath","/usr/src/app/packages/react/src/components/pagination/pagination.tsx","Pagination component, used to navigate through a list of items.","displayName","methods",[],"props",{"_301":302,"_320":321},"aria-label",{"_303":304,"_249":307,"_10":301,"_308":-7,"_309":310,"_315":316,"_317":318},"defaultValue",{"_305":306},"value","Sidenavigering","Sets the screen reader label for the Pagination area","parent","declarations",[311],{"_312":313,"_10":314},"fileName","app/packages/react/src/components/pagination/pagination.tsx","TypeLiteral","required",false,"type",{"_10":319},"string","asChild",{"_303":322,"_249":324,"_10":320,"_308":-7,"_309":325,"_315":316,"_317":327},{"_305":323},"false","Change the default rendered element for the one passed as a child, merging their props and behavior.",[326],{"_312":313,"_10":314},{"_10":328},"boolean",{"_289":330,"_293":332,"_249":333,"_296":334,"_297":335,"_299":336},{"_291":331},"\n Forrige\n","/usr/src/app/packages/react/src/components/pagination/pagination-button.tsx","PaginationButton component, use within a Pagination.Item.","PaginationButton",[],{},{"_289":338,"_293":340,"_249":341,"_296":342,"_297":343,"_299":344},{"_291":339},"\n \n Forrige\n \n","/usr/src/app/packages/react/src/components/pagination/pagination-item.tsx","PaginationItem component, use within a Pagination.List.","PaginationItem",[],{"_320":345},{"_303":346,"_249":324,"_10":320,"_308":-7,"_309":347,"_315":316,"_317":350},{"_305":323},[348],{"_312":349,"_10":314},"app/packages/react/src/components/pagination/pagination-item.tsx",{"_10":328},{"_289":352,"_293":354,"_249":355,"_296":356,"_297":357,"_299":358},{"_291":353},"\n \n \n Forrige\n \n \n","/usr/src/app/packages/react/src/components/pagination/pagination-list.tsx","PaginationList component, use within a Pagination.","PaginationList",[],{"_320":359},{"_303":360,"_249":324,"_10":320,"_308":-7,"_309":361,"_315":316,"_317":364},{"_305":323},[362],{"_312":363,"_10":314},"app/packages/react/src/components/pagination/pagination-list.tsx",{"_10":328},"navigation",{"_367":368,"_369":370,"_371":372},"overviewLink","/en/components/docs/pagination/overview","codeLink","/en/components/docs/pagination/code","accessibilityLink","/en/components/docs/pagination/accessibility","githubLink","https://github.com/digdir/designsystemet/tree/main/apps/www/app/content/components/pagination/en/accessibility.mdx","actionData","errors"]