Pagination
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#
- onPageSelect
func
RequiredSpecifies 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
RequiredSpecifies the total number of pages in the
Pagination
component. - paginationLabel
string
RequiredSpecifies 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
,Default{ previous: 'Previous', next: 'Next', page: 'Page', currentPage: 'Current Page', pageOfCount: 'of', }Specifies the labels to use for the
Previous
/Next
buttons as well as the various parts ofaria-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 thePrevious
button;next
: Text for theNext
button;page
: Text in thearia-label
on page buttons to describe the button (e.g., "Page 1");currentPage
: Text to depict the selected page in thearia-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', }
- 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 is1
. - maxPagesDisplayed
greaterThan(4)
Default7Specifies the number of page buttons to display in between the
Previous
andNext
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 than4
. The default is7
. - icons
shape
{leftIcon:elementType
,rightIcon:}elementType
,Default{ leftIcon: ChevronLeft, rightIcon: ChevronRight, }Specifies icons used to indicate previous and next page. Can be an element, string, symbol, etc. Default is chevrons rendered using fa-css.
- variantDefault'default'
enum
'default' | 'secondary' | 'reduced' | 'minimal' - invertColorsDefaultfalse
bool
- sizeDefault'default'
enum
'default' | 'small' - initialPageDefault1
number
Usage Insights#
Pagination
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-admin-portal | 21.13.1 | 3 | |
frontend-app-course-authoring | 22.8.1 | 1 | |
frontend-app-ecommerce | 20.46.3 | 1 | |
frontend-app-learner-dashboard | 22.9.0 | 1 | |
frontend-app-library-authoring | 21.11.3 | 5 | |
frontend-app-program-console | 21.13.1 | 2 | |
frontend-app-publisher | 21.13.1 | 1 | |
catalog-search | 21.13.1 | 1 | |
prospectus | 20.46.2 | 1 | |
studio-frontend | 3.4.8 | 1 |
PaginationReduced
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-admin-portal | 21.13.1 | 1 |