Paginator<mds-paginator>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
currentPagenumberSpecifies the current page selected in the paginator
pagesnumberSpecifies the number of total pages to be handled
Overview
The <mds-paginator> web component is the page-navigation control of the Magma Design System. It renders a horizontal strip of numbered page items framed by previous/next arrows, replacing an ad-hoc set of links or buttons with a single self-managing control.
Semantic Behavior
Self-rendered children: The paginator generates its own page items internally from pages; authors do not slot the items.Page change event: Selecting a page (or an arrow) emits mdsPaginatorChange with a detail of { page, caller }, where caller is the mds-paginator-item that triggered the change.Bounds clamping: Navigation requests below 1 or above pages are ignored, so the arrows can never move past the valid range.Arrow disabling: The back arrow is disabled on the first page and the forward arrow on the last page.Auto-scroll into view: When pages exceeds two, the strip scrolls so the active page is centered; selecting an item re-centers it, and so does focusing an item from the keyboard (tabbing through the pages). Pointer interaction never scrolls the strip before the click lands, so the clicked page is always the one selected. Scroll motion is themeable via --mds-paginator-scroll-behavior.Initial sync: On load the component navigates to the provided currentPage, emitting the change event and scrolling the strip to match.
Properties & Visual Configurations
pages is the total number of pages the control should represent and drives how many items are rendered; with 0 only the arrows appear.currentPage marks which item is selected and which arrows are disabled; set it to control the paginator from outside, or read it back after a mdsPaginatorChange to follow user navigation.This component does not use the shared variant / tone ladders defined in agents/variants.md; its appearance is tuned only through the CSS custom properties documented in AGENTS.md.