Pagination

Page navigation with prev/next, page numbers, and ellipsis for large ranges.

Navigationnavigationdatainteractive

Workbench

Rendering Pagination…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add pagination

Usage

TSX

"use client";

import * as React from "react";
import { Pagination } from "@/components/ui/pagination";

export default function Example() {
  const [page, setPage] = React.useState(3);
  return <Pagination currentPage={page} totalPages={12} onPageChange={setPage} />;
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.

HTML

<nav class="ml-pagination" aria-label="Pagination">
  <ol class="ml-pagination-list">
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to previous page"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m15 18-6-6 6-6" pathLength="1"></path></svg><span class="ml-pagination-button-label">Previous</span></button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 1" data-state="inactive">1</button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 2" data-state="inactive">2</button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 3" aria-current="page" data-state="active">3</button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 4" data-state="inactive">4</button>
    </li>
    <li><span class="ml-pagination-ellipsis" aria-hidden="true">…</span></li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 12" data-state="inactive">12</button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to next page"><span class="ml-pagination-button-label">Next</span><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m9 18 6-6-6-6" pathLength="1"></path></svg></button>
    </li>
  </ol>
</nav>

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-pagination`	—
`ml-pagination-list`	—
`ml-pagination-button`	`aria-current="page"data-state="active"`
`ml-pagination-button-label`	—
`ml-pagination-ellipsis`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

@mlola-ui/icons

Open the standalone preview