Pagination

Pagination splits long lists into pages so people can move forward, back, or jump to a specific page.

Variants

Start, middle, and end

Figma property variants: on the first page Previous is #94A3B8; on the last page Next is muted; in the middle both nav labels use #020617 (669:1388–669:1386).

Start (page 1 of 10)

Middle (page 5 of 10)

End (page 10 of 10)

Structure

Anatomy

Nav row

Horizontal flex, 4px gap between controls (669:1388). Geist 14px medium, line-height 1.4.

Previous / Next

Chevron + label, 12px horizontal padding, 8px vertical, 6px radius. Enabled: text #020617; disabled: #94A3B8.

Page cell

36px min width; selected: white fill, 1px #E2E8F0 border; default: transparent border, #0F172A numeral (669:1127 / 669:1129).

Ellipsis

32×32 bordered #E2E8F0 container with horizontal dots icon (669:1165).