Navigation

Pagination

Move through long result sets by page, or append the next page with Load more.

import { Pagination, LoadMore } from '@jsonresume/ui'Source(opens in a new tab)

Examples

PagesFirst, last and the pages around the current one.

Page 5 of 12. Pass href instead of onPageChange to render links.

pagination/pages.tsx

'use client';

import { Pagination, Text, Stack } from '@jsonresume/ui';
import { useState } from 'react';

export default function PaginationPages() {
  const [page, setPage] = useState(5);
  return (
    <Stack gap={3}>
      <Pagination page={page} pageCount={12} onPageChange={setPage} />
      <Text size="xs" tone="muted">
        Page {page} of 12. Pass href instead of onPageChange to render links.
      </Text>
    </Stack>
  );
}

20 jobs listed above…

Showing 20 of 64

Show code

pagination/load-more.tsx

'use client';

import { LoadMore, Stack, Text } from '@jsonresume/ui';
import { useState } from 'react';

export default function PaginationLoadMore() {
  const [shown, setShown] = useState(20);
  const [loading, setLoading] = useState(false);
  return (
    <Stack gap={3}>
      <Text tone="muted">{shown} jobs listed above…</Text>
      <LoadMore
        shown={shown}
        total={64}
        loading={loading}
        onLoadMore={() => {
          setLoading(true);
          setTimeout(() => {
            setShown((n) => Math.min(n + 20, 64));
            setLoading(false);
          }, 600);
        }}
      />
    </Stack>
  );
}

Usage

Do

Use pages when people return to a position; Load more for browsing feeds.

Don’t

Combine both on one list.

Accessibility

A named nav; the current page sets aria-current and every button is labelled ("Page 3", "Next").
Load more announces the new count politely.

Props

Also accepts the attributes of the element Pagination renders.
Prop	Type	Default	Description
page required	number	–
pageCount required	number	–
href	((page: number) => string)	–	Builds a link for each page (server-friendly).
label	string	Pagination
nextLabel	string	Next
onPageChange	((page: number) => void)	–	Or handle page changes in place.
previousLabel	string	Previous

Also accepts the attributes of the element LoadMore renders.
Prop	Type	Default	Description
onLoadMore required	() => void	–
shown required	number	–	How many items are showing, and how many exist (if known).
label	string	Load more
loading	boolean	false
total	number	–