Pagination Component
Page navigation, size selector, goto input, and flexible layout. Uses data-role attributes to
structure navigation elements like pages, previous/next, first/last, ellipsis, total count, goto, and size
selector.
Notes
- Base class:
.pagination. All child elements use data-role attributes (e.g.
data-role="page", data-role="previous", data-role="next").
- Use
data-selected="true" for the current page and data-disabled="true" for
disabled controls.
- Wrap page numbers in
<div data-role="pages"> for grouped display with collapsed borders.
- Size presets:
pagination-4 (16px) to pagination-15 (60px) — default is
pagination-8 (32px).
Basic usage
Default pagination
Default pagination with group
Plain (no borders)
Disabled state
All elements
Shapes
Default (small radius)
pagination-rounded
pagination-pill
pagination-square
pagination-fluid
Plain + pill
Sizes (pagination-4 ~ pagination-15)
16px (pagination-4)
20px (pagination-5)
24px (pagination-6)
28px (pagination-7)
32px (pagination-8, default)
36px (pagination-9)
40px (pagination-10)
44px (pagination-11)
48px (pagination-12)
52px (pagination-13)
56px (pagination-14)
60px (pagination-15)
Layout alignment
Center (default)
pagination-start (pages left, others right)
pagination-end (pages right, others left)
Theme colors
Primary
Secondary
Tertiary
Success
Error
Info
Highlight
Warning
Caution
Ink
Title
Description
Caption
Placeholder
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Tailwind colors
Raw / named colors
Adds padding to prevent layout collapse when content is cleared during page turning.
Combinations
Plain + pill + primary
Rounded + success + start
Plain + error + end