Krizaka
Documentation

Pagination

Moves through a long list page by page: numbers with ellipses that fold into “Page 3 of 12” on a phone, or previous / next on a cursor.

Web + MobileBetaNavigation

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

When to use

  • Under a table or a grid of results the person reads page by page: an admin list, search results, invoices.
  • With getHref when the page belongs in the address — a search engine and a shared link reach page 4.
  • In cursor mode (hasPrevious / hasNext) when the API only knows the next page (a cursor, a nextToken).

When not to use

  • For a feed people scroll without a goal: load more at the end of the list instead (an infinite list).
  • To switch between views of the same page: tabs.Use instead: Tabs

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Pagination, pageRange } from "@krizaka/ui/pagination";

Examples

Search results

Page numbers with ellipses and a status: the explore page of a video platform.

Under an admin table: the rows per page, the range shown, and the pages.

Cursor

An API that only knows the next and previous pages: two buttons and the range.

getHref: every page is a link — crawlable, shareable, the state in the URL.

Props

Moves through a long list: page numbers (folded on a narrow screen) or previous / next on a cursor.

PropTypeDefaultDescription
boundariesnumber1Pages always shown at each end. Default 1.
disabledboolean—Disables every control (a page is loading).
getHref((page: number) => string)—The address of a page: the pages become links (crawlable, shareable, the state in the URL).
hasNextboolean—Cursor mode: whether there is a next page.
hasPreviousboolean—Cursor mode: whether there is a previous page.
labelsPartial<PaginationLabels>—The words, passed translated; English by default.
onNext(() => void)—Cursor mode: called by the next control.
onPageChange((page: number) => void)—Called with the page asked for (buttons). Ignored for the pages getHref turns into links.
onPageSizeChange((size: number) => void)—Called with the size chosen.
onPrevious(() => void)—Cursor mode: called by the previous control.
pagenumber1Pages mode: the current page, from 1.
pageCountnumber—Pages mode: how many pages there are. Without it, the pagination is in cursor mode.
pageSizenumber—The page size, with pageSizeOptions and onPageSizeChange: a select of rows per page.
pageSizeOptionsreadonly number[]—The sizes offered ([10, 20, 50]).
siblingsnumber1Pages shown on each side of the current one. Default 1.
statusReactNode—A text beside the controls, read as is: "41–60 of 1,284", "12 results".

Accessibility

  • A nav named by labels.nav; the current page carries aria-current="page".
  • Each number is named “Page 4” (labels.page); the ellipses are hidden from assistive technology.
  • A disabled link is aria-disabled with no href: it is skipped by the Tab key and read as unavailable.

Keyboard

KeysAction
TabReaches the previous control, each page, then the next control.

Best practices

  • Say where the list stands with status (“61–80 of 392 videos”): it is read next to the controls.
  • Prefer links (getHref) for public lists; buttons (onPageChange) for a list inside an app screen.
  • Keep siblings at 1 on a list people browse; the container folds the numbers by itself under 28rem.
  • Disable the controls (disabled) while the next page loads, and move the focus to the top of the list after.

Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Nav bar

The Krizaka navigation bar: a floating pill that tightens as the page scrolls, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.

Segmented

A segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components