Pagination

import { Pagination } from '@elirobinson/react/components/molecules/Pagination';

import { useState } from 'react';

import { Pagination } from '@elirobinson/react/components/molecules/Pagination';

export default function Basic() {
  const [page, setPage] = useState(1);

  return <Pagination page={page} pageCount={6} onPageChange={setPage} />;
}

When to use it

Use Pagination for a page-by-page list or table where jumping straight to page 7 matters — a store catalog, a search results page. It renders one button per page with no windowing, which is fine through the range most lists actually use; past a hundred or so pages the button row gets long, so pull in Table's own built-in pagination or a windowed VirtualTable/VirtualList instead of raw Pagination at that scale.

Boundary states

Previous disables on page one, Next disables on the last page. onPageChange is never called with an out-of-range value — clicking Previous on page one, for instance, simply does nothing.

import { Pagination } from '@elirobinson/react/components/molecules/Pagination';

export default function Boundaries() {
  return (
    <div className="demo-col">
      <Pagination page={1} pageCount={4} onPageChange={() => {}} />
      <Pagination page={4} pageCount={4} onPageChange={() => {}} />
    </div>
  );
}

Props

Accessibility

• Renders a <nav aria-label="Pagination"> wrapping a <ul> of page buttons plus Previous/Next buttons — pass your own aria-label to override the default if a page has more than one paginated region.
• The active page button gets aria-current="page"; every page button has an aria-label of Page {n} so its number reads correctly even without visible page context.
• Previous and Next carry aria-label="Previous page" / "Next page" and use the native disabled attribute at the boundaries — a screen reader announces them as unavailable, not just visually dimmed.
• Keyboard: every button (Previous, each page, Next) is a native <button> in normal tab order. There's no roving tabindex and no arrow-key navigation between pages — Tab walks through them one at a time, same as any other button row.
• This is a primary control, so every button keeps the 44×44px touch target minimum.
• The ref forwards to the outer <nav>.

Related