Pagination
Parent-controlled pagination patterns for lists, carousels, dots, numeric modes, and accessible page state updates.
Available components
Pagination
indexFormat="dots"
indexFormat="dots"
Dots stay visible while the container has enough space
The parent owns the active quote, while pagination only emits navigation intent. When the available width gets too tight, the same dots variant falls back to numeric instead of overflowing. Dots page 01
No page change yet.
indexFormat="dots" (dark)
indexFormat="dots"
Dots stay visible while the container has enough space
The parent owns the active quote, while pagination only emits navigation intent. When the available width gets too tight, the same dots variant falls back to numeric instead of overflowing. Dots page 01
No page change yet.
indexFormat="numeric"
indexFormat="numeric"
Numeric always renders the page counter
Longer teaser to show that the content area can change independently while pagination remains controlled by the parent. This variant keeps the numeric status visible regardless of the available width. Results page 08
Nearby items controlled by the same page state-
07 · Energy insight 07 -
08 · Energy insight 08 -
09 · Energy insight 09
No page change yet.
indexFormat="numeric" (dark)
indexFormat="numeric"
Numeric always renders the page counter
Longer teaser to show that the content area can change independently while pagination remains controlled by the parent. This variant keeps the numeric status visible regardless of the available width. Results page 08
Nearby items controlled by the same page state-
07 · Energy insight 07 -
08 · Energy insight 08 -
09 · Energy insight 09
No page change yet.
indexFormat="fixed"
Fixed threshold: 3 pages stays dots on all viewports
fixed with 3 pages keeps dots on desktop and mobile. Active page: 02
Fixed threshold: 5 pages stays dots on desktop
fixed with 5 pages keeps dots on desktop and switches to numeric on mobile. Active page: 02
Fixed threshold: 6 pages switches to numeric on desktop
fixed with 6 pages already switches to numeric on desktop. Active page: 02
indexFormat="fixed" (dark)
Fixed threshold: 3 pages stays dots on all viewports
fixed with 3 pages keeps dots on desktop and mobile. Active page: 02
Fixed threshold: 5 pages stays dots on desktop
fixed with 5 pages keeps dots on desktop and switches to numeric on mobile. Active page: 02
Fixed threshold: 6 pages switches to numeric on desktop
fixed with 6 pages already switches to numeric on desktop. Active page: 02
Additional edge cases
Non-loop boundary
Disabled buttons communicate the first and last page
With loop disabled, the previous button is disabled on the first page and the next button is disabled on the last page. Boundary page 01
Loop navigation
Active teaser 01
Hydro production update. Previous from the first page wraps to the last page, and next from the last page wraps back to the first. Loop page 01
Indicator-only dots
Current slide: Energy usage
The dots are not clickable in this setup. The parent can still drive the active page from external controls, timers, or content logic. Indicator page 02
Clamped input edge case
Requested 99 → rendered 05
This mirrors real app protection against stale or out-of-range state. The component clamps for rendering, while the parent stays responsible for correcting the source state.
Dots switch before overflow
dots with 10 pages stays edge-to-edge in the card and switches to numeric when the available width gets tighter. Active page: 05
This keeps the pagination stretched across the container while still preferring dot rendering whenever the available space is large enough.
Additional edge cases (dark)
Non-loop boundary
Disabled buttons communicate the first and last page
With loop disabled, the previous button is disabled on the first page and the next button is disabled on the last page. Boundary page 01
Loop navigation
Active teaser 01
Hydro production update. Previous from the first page wraps to the last page, and next from the last page wraps back to the first. Loop page 01
Indicator-only dots
Current slide: Energy usage
The dots are not clickable in this setup. The parent can still drive the active page from external controls, timers, or content logic. Indicator page 02
Clamped input edge case
Requested 99 → rendered 05
This mirrors real app protection against stale or out-of-range state. The component clamps for rendering, while the parent stays responsible for correcting the source state.
Dots switch before overflow
dots with 10 pages stays edge-to-edge in the card and switches to numeric when the available width gets tighter. Active page: 05
This keeps the pagination stretched across the container while still preferring dot rendering whenever the available space is large enough.