Pagination

Controlled page navigator: renders numbered page buttons with previous/next (and optional first/last) controls and ellipses for gaps.

When to use

Use Pagination to page through a known number of pages. It is a controlled primitive — you own the current page and update it in onPageChange; the component computes which numbers, ellipses, and boundary buttons to show.

There is no @uxf/form twin — Pagination is not a form field.

Usage

import { Pagination } from "@uxf/ui/pagination";
import { useState } from "react";

function Example() {
    const [page, setPage] = useState(1);

    return <Pagination count={10} onPageChange={setPage} page={page} />;
}

Props

Variants & states

Built-in sizes (from theme.ts):

PaginationSizes is an open interface. A project can add its own sizes via module augmentation:

// pagination.d.ts
declare module "@uxf/ui/pagination/theme" {
    interface PaginationSizes {
        xxl: true;
    }
}

Behavioural states:

• Boundaries: the previous/first buttons are disabled when page === 1; the next/last buttons are disabled when page === count.
• Ellipses: gap items (start-ellipsis / end-ellipsis) are rendered as non-interactive ….

Requirements

Pagination renders Icon for its nav arrows, so import both stylesheets once in your global CSS:

@import url("@uxf/ui/css/pagination.css");
@import url("@uxf/ui/css/icon.css");

The app's icon set (configured on UiContextProvider, see Icon) must include the arrow icons used by the nav buttons:

• chevronsLeft
• chevronLeft
• chevronRight
• chevronsRight

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.