Components · pagination
Pagination. Five flavours, accessible.
Page-number list with prev/next arrows. Numbered, prev-next-only, with-page-input, mini chips, text-of-pages.
01 · base
.lsd-pagination
Each page is a button; aria-current="page" marks the active one. JS demo cycles through pages.
base
Default
Numbered list with prev/next arrows. Click to navigate.
aria-current="page"
tones
primary / ghost
Ghost mode drops the borders for a quieter look.
.lsd-pagination--ghost
02 · variants
Five variants
.lsd-pagination--numbered
Numbered (default)
Classic 1-2-3-…-10.
.lsd-pagination
.lsd-pagination--prev-next-only
Prev / Next only
For long lists where page numbers don't matter.
.lsd-pagination--prev-next-only
.lsd-pagination--with-page-input
Page input
Type a page number to jump.
.lsd-pagination--with-page-input
.lsd-pagination--mini
Mini
Compact — fits in toolbars.
.lsd-pagination--mini
.lsd-pagination--text-of-pages
"Page X of Y"
Bare-bones status.
.lsd-pagination--text-of-pages
03 · animations
Active state transition
Click a page — the active highlight transitions. Combined with .lsd-fx--ripple-click for material feedback.
.lsd-fx--ripple-click
Ripple on click
Chained on each page button.
.lsd-fx--ripple-click
Components · LSD primitives