Skip to content
DOL Studio

Pagination

Design: Stable Code: Coded navdata 6 Figma sets 1 standalone Pagination/General

Live preview

Small set (8 pages, no ellipsis)

Current page: 3 / 8 · no ellipsis needed

Mid set (20 pages, ellipsis both sides)

Current page: 10 / 20 · ellipsis when current is mid-range

Large set (100 pages)

Current page: 50 / 100 · ellipsis condenses page lists

Size variants

3 sizes — sm / md / lg. Auto-fit grid: cellMinWidth=320px (Pagination shows multiple page buttons).
size="sm"
size="md"
size="lg"

Import & files

Import
import { Pagination } from "@dol/ui/pagination";
Source file
packages/@dol/ui/src/pagination/Pagination.tsx

Figma source

Figma source 6 sets
Page
Pagination
Sets
6 + 1 standalone
Primary set
Pagination/General · 12 variants Open in Figma →
Showing: Pagination/General
5 other sets
  • Pagination item/Addition 2 variants Figma →
  • Pagination item/Page number button 72 variants Figma →
  • Pagination item/View per page 3 variants Figma →
  • Pagination/Paging 6 variants Figma →
  • Pagination/Simple 2 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Pagination
Slug: `pagination`
Domain: general · Category: navigation
Design: stable · Code: coded


## Description
Page-number buttons + view-per-page selector + addition controls. Pair with table or feed.


## Import
```ts
import { Pagination } from "@dol/ui/pagination";
```
Source: `packages/@dol/ui/src/pagination/Pagination.tsx`


## Figma source
Page: Pagination
Sets: 6
Primary: Pagination/General
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=7863-84110

Related

  • L
    lms

    LMS Role Sidebar

    Design only
  • Pressed

    Tabbar, Toggle

    Coded
  • S
    nav

    Sidebar

    Coded
    1. 1
    2. 2
      2
    3. 3
      3

    Steps

    Coded
  • HomeSectionCurrent

    Breadcrumb

    Coded
  • Nav item

    NavItem

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).