Skip to main content

Pagination

Result
Loading...
Live Editor
function Example() {
	const [activePage, setActivePage] = React.useState();

	function handlePageClick(e, activePage) {
		setActivePage(activePage);
	}

	return (
		<Pagination
			id="pagination-demo"
			amount={20}
			activePage={activePage}
			onPageClick={handlePageClick}
		/>
	);
}

First and Last​

If you have a lot of pages, the showFirstAndLast prop will enable buttons that allow the user to jump to the first or last page.

Result
Loading...
Live Editor
function Example() {
	const [activePage, setActivePage] = React.useState();

	function handlePageClick(e, activePage) {
		setActivePage(activePage);
	}

	return (
		<div data-testid="pw-pagination">
			<Pagination
				id="pagination-demo"
				amount={20}
				activePage={activePage}
				onPageClick={handlePageClick}
				showFirstAndLast
			/>
		</div>
	);
}

Size​

Result
Loading...
Live Editor
function Example() {
	return (
		<div>
			<Pagination id="pagination-demo" amount={20} size="sm" />
			<Pagination id="pagination-demo" amount={20} size="md" />
		</div>
	);
}

Analytics​

The Pagination component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Pagination',
	actions: {
		onPageClick: { type: 'PAGINATION_PAGECLICK', payload: 'Click' },
	},
};

Props​