Pagination

Pagination is used to split up long datasets into multiple 'pages'

Pagination is used on various listing pages. It's typically found at the end of search result pages, My Ads, Favorite lists, or anywhere a long list of items are divided up and presented to users over multiple pages. Since pagination is a fairly basic and familiar feature, it's reasonable to expect that users would benefit from a consistent design and behaviour. Consistency reduces cognitive load, which in turn leads to less frustrated and more happy users.

React

released

Vue

unsupported

Elements

unsupported

Android

unsupported

iOS

unsupported

Example

Example theme:

DBA lightFinn lightTori light

Accessibility

The current page is indicated by aria-current="page". There is a screen reader only Heading that reads Pages in each locale. The buttons are anchor tags marked with role="button".

The component is fully accessible.

Frameworks

Import

You can import the component like so:

import { Pagination } from '@warp-ds/react';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { Pagination } from '@warp-ds/react/components/pagination'

Props

Required props

name	type	default	notes
createHref	(page: number) => string		Function that returns the href for a given page
currentPage	number		The current page number. Adjusted so its never below 1, and never above lastPage.
lastPage	number		The number of the last page.

Optional Props

name	type	default	notes
className	string		Additional classes to include
style	CSSProperties		CSS styles to inline on the component container.
onChange	(page: number) => void		Handler that is called with the page number to navigate to. event.preventDefault is called for you. Fallbacks to default browser behavior if undefined.
numPages	number		The number of pages to show in the pagination.

Example

function PaginationExample() {
    const [currentPage, setCurrentPage] = useState(0);

    return <Pagination
        currentPage={currentPage}
        lastPage={10}
        createHref={(page) => `?page=${page}`}
        onChange={(page) => setCurrentPage(page)}
    />;
}