Pagination
One 32-tall slot drawn sixteen ways, and a bar that is nothing but seven of them in a row - the component knows how a page link looks, never how many pages there are.
Four variants times seven states would be twenty-eight, and eleven of those cannot happen. Previous and Next are never Active because they are not a page, and Ellipsis is not a control at all - it has one state and no hover. The matrix draws the sixteen that exist.
The page you are on takes base.background with a 1px base.input outline - the same treatment an outline Button gets. It reads as raised rather than selected, which is right: you can still click it, it just will not take you anywhere new.
Active Hover and Active Focus exist because the current page still responds. Hover swaps the fill to base.muted and keeps the outline; Focus adds the ring outside it. Without them the current page would go dead under the cursor.
333 × 32, and every slot is an instance
Seven Pagination Items in a row 2 apart: Previous, four numbers with the second one Active, an ellipsis, and Next. Nothing in the bar is drawn locally, so a change to the item reaches all seven at once.
The same item, four arrangements
The first one works: twelve pages, click anything. Watch where the ellipsis goes as you move - that is the only part of pagination with any logic in it, and the component leaves it to you.
The item has no idea how many pages there are. Which numbers to show, where the ellipsis lands and whether Previous is disabled are all decisions the page makes - the component only draws one slot at a time, which is why sixteen variants cover every arrangement above.
Two components, sixteen variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Pagination
Because eleven of the combinations cannot occur. Previous and Next are never Active - they are a direction, not a page - so they carry Default, Hover, Focus and Disabled and stop there. Ellipsis is not a control at all: one state, no hover, no focus. Only Link takes all seven. Four plus four plus seven plus one is sixteen, and the matrix is drawn sparse rather than padded out with states nobody can reach.
base.background with a 1px base.input outline - the same treatment an outline Button gets, not a filled one. The page you are on should read as raised rather than selected, because it is still a live control: Active Hover swaps the fill to base.muted and keeps the outline, Active Focus adds the ring outside it. A solid fill would have made the current page look disabled.
Not in the component. The item draws one slot and has no idea how many pages exist, which is exactly why sixteen variants cover every arrangement - the base example, numbers only, icons beside a table. Deciding which numbers to show and where the gaps fall is the page's job, and the usage examples on this page do it live.
93 against 68, and it is only the word. Both are padding 8, gap 4, a 16px chevron and a 14/500 label; "Previous" is simply longer than "Next". The chevron sits before the label on one and after it on the other, which is the only structural difference between them.