Pagination

Edit this page Leave feedback

Navigation between multiple pages of some set of results. Controls are provided to navigate through multiple pages of related data.

Default Size

Uncontrolled Usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

Controlled Usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [currentPage, setCurrentPage] = useState(1);
  
  const handlePageSelect = (page) => setTimeout(() => setCurrentPage(page), 1000);
  
  return (
    <Pagination
      paginationLabel="pagination navigation"
      pageCount={20}
      currentPage={currentPage}
      onPageSelect={(page) => handlePageSelect(page)}
    />
  );
}

() => {
  const [currentPage, setCurrentPage] = useState(1);
  
  const handlePageSelect = (page) => setTimeout(() => setCurrentPage(page), 1000);
  
  return (
    <Pagination
      paginationLabel="pagination navigation"
      pageCount={20}
      currentPage={currentPage}
      onPageSelect={(page) => handlePageSelect(page)}
    />
  );
}

Uncontrolled usage with initial page

Show editable code example

Any Paragon component or export may be added to the code example.

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  initialPage={5}
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  initialPage={5}
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

Secondary

Show editable code example

Any Paragon component or export may be added to the code example.

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  variant="secondary"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
  icons={{
    leftIcon: ArrowBackIos,
    rightIcon: ArrowForwardIos,
  }}
/>

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  variant="secondary"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
  icons={{
    leftIcon: ArrowBackIos,
    rightIcon: ArrowForwardIos,
  }}
/>

Reduced

Show editable code example

Any Paragon component or export may be added to the code example.

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  variant="reduced"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  variant="reduced"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

Minimal

Show editable code example

Any Paragon component or export may be added to the code example.

<Pagination
  paginationLabel="pagination navigation"
  pageCount={5}
  variant="minimal"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
  icons={{
    leftIcon: ArrowBackIos,
    rightIcon: ArrowForwardIos,
  }}
/>

<Pagination
  paginationLabel="pagination navigation"
  pageCount={5}
  variant="minimal"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
  icons={{
    leftIcon: ArrowBackIos,
    rightIcon: ArrowForwardIos,
  }}
/>

Small Size

Default variant

Show editable code example

Any Paragon component or export may be added to the code example.

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  size="small"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  size="small"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

Secondary (Small Size)

Show editable code example

Any Paragon component or export may be added to the code example.

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  variant="secondary"
  size="small"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  variant="secondary"
  size="small"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

Reduced (Small Size)

Show editable code example

Any Paragon component or export may be added to the code example.

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  variant="reduced"
  size="small"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

<Pagination
  paginationLabel="pagination navigation"
  pageCount={20}
  variant="reduced"
  size="small"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

Minimal (Small Size)

Show editable code example

Any Paragon component or export may be added to the code example.

<Pagination
  paginationLabel="pagination navigation"
  pageCount={5}
  variant="minimal"
  size="small"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

<Pagination
  paginationLabel="pagination navigation"
  pageCount={5}
  variant="minimal"
  size="small"
  onPageSelect={(page) => console.log(`page ${page} selected`)}
/>

Inverse Pallete (Default Size)

Show editable code example

Any Paragon component or export may be added to the code example.

<div className="bg-dark-700 p-4">
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    variant="secondary"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
    icons={{
      leftIcon: ArrowBackIos,
      rightIcon: ArrowForwardIos,
    }}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    variant="reduced"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={5}
    invertColors
    variant="minimal"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
    icons={{
      leftIcon: ArrowBackIos,
      rightIcon: ArrowForwardIos,
    }}
  />
</div>

<div className="bg-dark-700 p-4">
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    variant="secondary"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
    icons={{
      leftIcon: ArrowBackIos,
      rightIcon: ArrowForwardIos,
    }}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    variant="reduced"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={5}
    invertColors
    variant="minimal"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
    icons={{
      leftIcon: ArrowBackIos,
      rightIcon: ArrowForwardIos,
    }}
  />
</div>

Inverse Pallete (Small Size)

Show editable code example

Any Paragon component or export may be added to the code example.

<div className="bg-dark-700 p-4">
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    size="small"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    size="small"
    variant="secondary"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    variant="reduced"
    size="small"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={5}
    invertColors
    variant="minimal"
    size="small"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
</div>

<div className="bg-dark-700 p-4">
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    size="small"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    size="small"
    variant="secondary"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={20}
    invertColors
    variant="reduced"
    size="small"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
  <Pagination
    paginationLabel="pagination navigation"
    pageCount={5}
    invertColors
    variant="minimal"
    size="small"
    onPageSelect={(page) => console.log(`page ${page} selected`)}
  />
</div>

Theme Variables (SCSS)#

$pagination-padding-y:               .625rem !default;
$pagination-margin-x:                .5rem !default;
$pagination-line-height:             1.5rem !default;
$pagination-font-size-sm:            .875rem !default;
$pagination-icon-width:              2.25rem !default;
$pagination-icon-height:             2.25rem !default;
$pagination-toggle-border:           .3125rem !default;
$pagination-toggle-border-sm:        .25rem !default;
$pagination-secondary-height:        2.75rem !default;
$pagination-secondary-height-sm:     2.25rem !default;
$pagination-dropdown-color-inverse:  $white !default;
$pagination-border-width:            $border-width !default;
$pagination-reduced-dropdown-max-height:  60vh !default;
$pagination-reduced-dropdown-min-width:  6rem !default;

Props API#

Pagination Props API

onPageSelect func Required
Specifies a callback function that is executed when the user selects a page button or the Previous/Next buttons. For example:
```
 <Pagination onPageSelect={(pageNumber) => { console.log(pageNumber); } />
```
pageCount number Required
Specifies the total number of pages in the Pagination component.
paginationLabel string Required
Specifies the aria-label for the <nav> element that wraps the pagination button list.
buttonLabels shape {
previous: string,
next: string,
page: string,
currentPage: string,
pageOfCount: string,
}
Specifies the labels to use for the Previous/Next buttons as well as the various parts of aria-label on the page buttons for accessibility. All button labels accept both string or elements. The button label options are as follows:
previous: Text for the Previous button;
next: Text for the Next button;
page: Text in the aria-label on page buttons to describe the button (e.g., "Page 1");
currentPage: Text to depict the selected page in the aria-label on page buttons (e.g., "Page 1, Current Page");
pageOfCount: Text that separates the current page and total page count for the mobile UI (e.g., "Page 1 of 20").
The default is:
```
{
  previous: 'Previous',
  next: 'Next',
  page: 'Page',
  currentPage: 'Current Page',
  pageOfCount: 'of',
}
```
Default{ previous: 'Previous', next: 'Next', page: 'Page', currentPage: 'Current Page', pageOfCount: 'of', }
className string
Specifies any class name(s) for the Pagination component. The default is an empty string.
currentPage number
specifies the page that the Pagination component will automatically select. The default is 1.
maxPagesDisplayed greaterThan(4)
Specifies the number of page buttons to display in between the Previous and Next buttons. This number also includes any ellipses in the total count. Also, to ensure that at least one clickable page button is shown when both ellipses are displayed, this value must be greater than 4. The default is 7.
Default7
icons shape {
leftIcon: elementType,
rightIcon: elementType,
}
Specifies icons used to indicate previous and next page. Can be an element, string, symbol, etc. Default is chevrons rendered using fa-css.
Default{ leftIcon: ChevronLeft, rightIcon: ChevronRight, }
variant enum'default' | 'secondary' | 'reduced' | 'minimal'
Default'default'
invertColors bool
Defaultfalse
size enum'default' | 'small'
Default'default'
initialPage number
Default1

Usage Insights#

Pagination

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	3
frontend-app-course-authoring	21.5.6	1
frontend-app-ecommerce	20.46.2	1
frontend-app-learner-dashboard	20.46.2	1
frontend-app-library-authoring	21.5.6	5
frontend-app-program-console	20.46.2	2
frontend-app-publisher	20.46.3	1
catalog-search	20.45.0	1
prospectus	20.46.2	1
studio-frontend	3.4.8	1

PaginationReduced

	Project Name	Paragon Version	Instance Count
	frontend-app-admin-portal	20.46.3	1

Edit this page Leave feedback

Paragon Design System

Theme

Pagination

Default Size

Uncontrolled Usage

Controlled Usage

Uncontrolled usage with initial page

Secondary

Reduced

Minimal

Small Size

Default variant

Secondary (Small Size)

Reduced (Small Size)

Minimal (Small Size)

Inverse Pallete (Default Size)

Inverse Pallete (Small Size)

Theme Variables (SCSS)#

Props API#

Usage Insights#

Pagination

PaginationReduced

All components (A-Z)

Theme

Pagination

Default Size#

Uncontrolled Usage#

Controlled Usage#

Uncontrolled usage with initial page#

Secondary#

Reduced#

Minimal#

Small Size#

Default variant#

Secondary (Small Size)#

Reduced (Small Size)#

Minimal (Small Size)#

Inverse Pallete (Default Size)#

Inverse Pallete (Small Size)#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Pagination

PaginationReduced

All components (A-Z)

Default Size

Uncontrolled Usage

Controlled Usage

Uncontrolled usage with initial page

Secondary

Reduced

Minimal

Small Size

Default variant

Secondary (Small Size)

Reduced (Small Size)

Minimal (Small Size)

Inverse Pallete (Default Size)

Inverse Pallete (Small Size)