SGDS Pagination Component Skill

<sgds-pagination> renders a paging control from dataLength, itemsPerPage, and currentPage. All navigation logic is managed by the component — listen to sgds-page-change to apply the new page to your data query.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Basic paging control? → Set dataLength, itemsPerPage, currentPage

Show page number buttons? → variant="number"

Show only Prev/Next buttons with a description label? → variant="description"

Compact button version? → variant="button"