Theme

npm_versionnpm Paragon package page

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

Default Size

Uncontrolled Usage

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

Controlled Usage

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

Uncontrolled usage with initial page

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

Secondary

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

Reduced

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

Minimal

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

Small Size

Default variant

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

Secondary (Small Size)

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

Reduced (Small Size)

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

Minimal (Small Size)

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

Inverse Pallete (Default Size)

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

Inverse Pallete (Small Size)

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

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 NameParagon VersionInstance Count
frontend-app-admin-portal21.13.13
frontend-app-course-authoring22.8.11
frontend-app-ecommerce20.46.31
frontend-app-learner-dashboard22.9.01
frontend-app-library-authoring21.11.35
frontend-app-program-console21.13.12
frontend-app-publisher21.13.11
catalog-search21.13.11
prospectus20.46.21
studio-frontend3.4.81

PaginationReduced

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.11