Pagination
Pagination shows how many pages or slides there are, and which one someone is on.
Preview
Where you are in a paged sequence. Dots for carousels and onboarding, Numbered for lists and tables. The component's own advice: prefer scrolling on mobile wherever the content allows.
Every width here is arithmetic: nine 36 targets and eight 4 gaps make 356, seven targets make 276. 356 does not fit a 390 screen once you add a page margin.
Dots
Three dots, 26 by 24. The only thing that moves is which one is big. For a carousel or onboarding, where the user swipes and the dots report.
Three is what the component ships, not a limit of the idea: past about six the dots stop being countable. The current dot is 8 and the others 5, so size carries the state as well as colour, readable without telling blue from grey. The inactive dots are single mode, so they do not lift in dark.
Numbered
Two arrows and a run of numbers with the middle truncated. The three variants are three positions in the sequence, each truncating differently.
First disables the back arrow, Last the forward one, Center enables both and pays with two ellipses. The ellipsis is the Disabled state of the same 36 target, so it looks pressable and is not: give it no tap handler. The numbers are the file's placeholders, not a rule.
Page states
The private target behind every number carries four states: two circles you can see, one you cannot, and the ellipsis.
Default has no fill, Pressed takes bg/weak-50, Active takes brand/base and turns the label Semi Bold, Disabled is the ellipsis. Active is the only state that changes the weight. The chevrons are their own component with one boolean and no pressed state.
Properties
Two axes on the published component, six variants. The three private blocks behind it carry their own.
No text properties anywhere: the numbers are baked into each variant, so real page numbers mean overriding the text on each instance. The widths do not change; a 36 target holds two digits comfortably and three at a squeeze.
Tokens
Every value the component reads, resolved to its primitive.
The published dots override what the _Dot main draws, and both values are single mode Foundations primitives, so neither themes. The bar also mixes the axis: its active dot is the Dark variant and its inactive ones are Light.
Guidelines
Use Dots where the user swipes and the indicator only reports. Nothing to press, nothing to read, and it survives any width.
Do not put nine 36 targets across a phone. 356 does not fit a 390 screen with margins, and a row that scrolls sideways to reach the next page is worse than no pagination.
On mobile the honest default is not to paginate at all. Infinite scroll or a Load more button beats a row of small round targets. Reach for Numbered when the user needs to jump, not advance. If they only ever go forward, one arrow and a count is the whole control.