{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/navigation/pagination","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"cd9dda5c-9102-589b-91b0-9625c2d519cb","title":"Pagination","slug":"/contrast/react/navigation/pagination"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Pagination\",\n  \"metaTitle\": \"Pagination Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building a Pagination Component using the Contrast Bootstrap React Package\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Pagination\"), mdx(\"p\", null, \"Pagination is a component used to indicate existence of a series of related content across multiple pages and enables navigation across them.\"), mdx(\"p\", null, \"We use a large block of connected links for our pagination, making links hard to miss and easily scalable\\u2014all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. We use a wrapping \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<nav>\"), \" element to identify it as a navigation section to screen readers and other assistive technologies.\"), mdx(\"h2\", null, \"Examples\"), mdx(\"p\", null, \"Default Pagination example.\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"nav\", {\n    \"aria-label\": \"Page navigation example\"\n  }, mdx(\"ul\", {\n    className: \"pagination\"\n  }, mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round\",\n    href: \"#\"\n  }, \"Prev\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round\",\n    href: \"#\"\n  }, \"1\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round\",\n    href: \"#\"\n  }, \"2\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round\",\n    href: \"#\"\n  }, \"3\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round\",\n    href: \"#\"\n  }, \"Next\")))), mdx(\"nav\", {\n    \"aria-label\": \"Page navigation example\"\n  }, mdx(\"ul\", {\n    className: \"pagination\"\n  }, mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round text-white bg-success\",\n    href: \"#\"\n  }, \"Prev\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round text-white bg-success\",\n    href: \"#\"\n  }, \"1\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round text-white bg-success\",\n    href: \"#\"\n  }, \"2\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round text-white bg-success\",\n    href: \"#\"\n  }, \"3\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link page-link-round text-white bg-success\",\n    href: \"#\"\n  }, \"Next\")))), mdx(\"nav\", {\n    \"aria-label\": \"Page navigation example\"\n  }, mdx(\"ul\", {\n    className: \"pagination pagination-secondary\"\n  }, mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-secondary\",\n    href: \"#\"\n  }, \"Prev\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-secondary\",\n    href: \"#\"\n  }, \"1\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-secondary\",\n    href: \"#\"\n  }, \"2\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-secondary\",\n    href: \"#\"\n  }, \"3\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-secondary\",\n    href: \"#\"\n  }, \"Next\")))), mdx(\"nav\", {\n    \"aria-label\": \"Page navigation example\"\n  }, mdx(\"ul\", {\n    className: \"pagination pagination-sm\"\n  }, mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-warning\",\n    href: \"#\"\n  }, \"Prev\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-warning\",\n    href: \"#\"\n  }, \"1\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-warning\",\n    href: \"#\"\n  }, \"2\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-warning\",\n    href: \"#\"\n  }, \"3\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-warning\",\n    href: \"#\"\n  }, \"Next\")))), mdx(\"nav\", {\n    \"aria-label\": \"Page navigation example\"\n  }, mdx(\"ul\", {\n    className: \"pagination pagination-sm\"\n  }, mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-white\",\n    href: \"#\"\n  }, \"Prev\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-white\",\n    href: \"#\"\n  }, \"1\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-white\",\n    href: \"#\"\n  }, \"2\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-white\",\n    href: \"#\"\n  }, \"3\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-white\",\n    href: \"#\"\n  }, \"Next\")))), mdx(\"nav\", {\n    \"aria-label\": \"Page navigation example\"\n  }, mdx(\"ul\", {\n    className: \"pagination\"\n  }, mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-light\",\n    href: \"#\"\n  }, \"Prev\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-light\",\n    href: \"#\"\n  }, \"1\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-light\",\n    href: \"#\"\n  }, \"2\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-light\",\n    href: \"#\"\n  }, \"3\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-dark bg-light\",\n    href: \"#\"\n  }, \"Next\")))), mdx(\"nav\", {\n    \"aria-label\": \"Page navigation example\"\n  }, mdx(\"ul\", {\n    className: \"pagination\"\n  }, mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-danger\",\n    href: \"#\"\n  }, \"Prev\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-danger\",\n    href: \"#\"\n  }, \"1\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-danger\",\n    href: \"#\"\n  }, \"2\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-danger\",\n    href: \"#\"\n  }, \"3\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link text-white bg-danger\",\n    href: \"#\"\n  }, \"Next\")))), mdx(\"nav\", {\n    \"aria-label\": \"Page navigation example\"\n  }, mdx(\"ul\", {\n    className: \"pagination\"\n  }, mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link\",\n    href: \"#\"\n  }, \"Prev\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link\",\n    href: \"#\"\n  }, \"1\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link\",\n    href: \"#\"\n  }, \"2\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link\",\n    href: \"#\"\n  }, \"3\")), mdx(\"li\", {\n    className: \"page-item\"\n  }, mdx(\"span\", {\n    className: \"page-link\",\n    href: \"#\"\n  }, \"Next\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBPagination, CDBPageLink, CDBPageItem, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Pagination = () => {\\n  return (\\n    <CDBContainer>\\n        <CDBPagination circle>\\n          <CDBPageLink>Prev</CDBPageLink>\\n          <CDBPageItem>1</CDBPageItem>\\n          <CDBPageItem>2</CDBPageItem>\\n          <CDBPageItem>3</CDBPageItem>\\n          <CDBPageLink>Next</CDBPageLink>\\n        </CDBPagination>\\n        <CDBPagination circle size=\\\"big\\\" color=\\\"success\\\">\\n          <CDBPageLink>Prev</CDBPageLink>\\n          <CDBPageItem>1</CDBPageItem>\\n          <CDBPageItem>2</CDBPageItem>\\n          <CDBPageItem>3</CDBPageItem>\\n          <CDBPageLink>Next</CDBPageLink>\\n        </CDBPagination>\\n        <CDBPagination size=\\\"small\\\" color=\\\"secondary\\\">\\n          <CDBPageLink>Prev</CDBPageLink>\\n          <CDBPageItem>1</CDBPageItem>\\n          <CDBPageItem>2</CDBPageItem>\\n          <CDBPageItem>3</CDBPageItem>\\n          <CDBPageLink>Next</CDBPageLink>\\n        </CDBPagination>\\n        <CDBPagination color=\\\"warning\\\" sm>\\n          <CDBPageLink>Prev</CDBPageLink>\\n          <CDBPageItem>1</CDBPageItem>\\n          <CDBPageItem>2</CDBPageItem>\\n          <CDBPageItem>3</CDBPageItem>\\n          <CDBPageLink>Next</CDBPageLink>\\n        </CDBPagination>\\n        <CDBPagination color=\\\"white\\\" sm>\\n          <CDBPageLink>Prev</CDBPageLink>\\n          <CDBPageItem>1</CDBPageItem>\\n          <CDBPageItem>2</CDBPageItem>\\n          <CDBPageItem>3</CDBPageItem>\\n          <CDBPageLink>Next</CDBPageLink>\\n        </CDBPagination>\\n        <CDBPagination color=\\\"light\\\">\\n          <CDBPageLink>Prev</CDBPageLink>\\n          <CDBPageItem>1</CDBPageItem>\\n          <CDBPageItem>2</CDBPageItem>\\n          <CDBPageItem>3</CDBPageItem>\\n          <CDBPageLink>Next</CDBPageLink>\\n        </CDBPagination>\\n        <CDBPagination color=\\\"danger\\\">\\n          <CDBPageLink>Prev</CDBPageLink>\\n          <CDBPageItem>1</CDBPageItem>\\n          <CDBPageItem>2</CDBPageItem>\\n          <CDBPageItem>3</CDBPageItem>\\n          <CDBPageLink>Next</CDBPageLink>\\n        </CDBPagination>\\n        <CDBPagination>\\n          <CDBPageLink>Prev</CDBPageLink>\\n          <CDBPageItem>1</CDBPageItem>\\n          <CDBPageItem>2</CDBPageItem>\\n          <CDBPageItem>3</CDBPageItem>\\n          <CDBPageLink>Next</CDBPageLink>\\n        </CDBPagination>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Pagination;\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Pagination component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast Pagination Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast Pagination component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBPagination, CDBPageLink, CDBPageItem, CDBContainer } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Pagination Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBPagination component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPagination className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"ul\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default pagination tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPagination tag=\\\"ol\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"size\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes size of pagination component. Choose from \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"lg\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"sm\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPagination size=\\\"sm\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"sm\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes the size of pagination component to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"sm\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPagination sm .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"circle\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes the shape of pagination component to circular\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPagination circle .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dark\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default pagination buttons color; available values: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[blue, red, teal, dark-grey, dark, blue-grey, amber, purple]\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPagination color=\\\"red\\\" ... />\")))), mdx(\"p\", null, \"API Reference: Contrast Pagination Item Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBPageItem component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPageItem className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"li\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default pagination tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPageItem tag=\\\"li\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disable\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Disables item from being clicked\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPageItem disabled .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"active\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets active state of the button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPageItem active .../>\")))), mdx(\"p\", null, \"API Reference: Contrast Pagination Link Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBPageLink component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPageLink className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"li\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default pagination tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPageLink tag=\\\"li\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disable\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Disables item from being clicked\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPageLink disabled .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"active\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets active state of the button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBPageLink active .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#pagination","title":"Pagination","items":[{"url":"#examples","title":"Examples"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-pagination-import-statement","title":"Contrast Pagination Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/navigation/pagination.mdx"},"frontmatter":{"metaTitle":"Pagination Component for Contrast Bootstrap React","metaDescription":"Building a Pagination Component using the Contrast Bootstrap React Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"cd9dda5c-9102-589b-91b0-9625c2d519cb"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}