COMPONENTS / MOLECULES / al-pagination← ALL COMPONENTS

Pagination

<al-pagination><ALPagination> REACTbetaOPEN IN FIGMA ↗

Reference generated from the custom elements manifest — 9 properties, 4 slots, 1 events.

PLAYGROUND0 CONTROLS
PREVIEW / al-pagination / ALTITUDE
Loading preview
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYALTITUDE DESIGN SYSTEM
BOTH CHANGEDAltitude Design SystemFIGMA SET · Pagination3 PROPERTY DIFFSFROM TRACKED PROJECTION
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
9 ATTR · 4 SLOT · 1 EVENT · 0 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
PROPERTYDISAGREEMENTCODE / CANVAS
Text[prop] missing-in-code— / Text
theme/color/content/neutral-default[token-binding] missing-in-code— / theme/color/content/neutral-default
theme/space/@[token-binding] missing-in-code— / theme/space/@
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEpagination--DefaultPASS
Advanced statesAXE1 further storyPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
MEASURED 2026-09-08 · 2 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 2 STORIES.
INSTALL@southleft/al-web-components/components/pagination
import '@southleft/al-web-components/components/pagination';
import { ALPagination } from '@southleft/al-react';
API — 9 PROPS9 DOCUMENTED
PROPTYPEDEFAULT
prevButtonTextstringText displayed on the previous button'Previous'
nextButtonTextstringText displayed on the next button'Next'
ariaLabelstringAria label attribute for accessibility
Provides an accessible name for the navigation element—
totalRecordsnumberTotal number of records
Represents the total size of the data set—
currentItemnumberCurrent page number being displayed1
pageSizenumberNumber of records to display per page10
pageSizeOptionsArray<number>Dropdown options for choosing the number of items displayed per page[20, 40, 60, 80, 100]
variant'small'Variant of pagination (e.g., 'small' for a compact view)—
pageSizeLabelstringLabel text for the page size dropdown'Show'
SLOTS4
SLOTDESCRIPTION
inpage-labelLabel for the in-page pagination controls.
labelIf content is slotted, it will override the default pagination label
prevIf content is slotted, it will override the default "previous" icon
nextIf content is slotted, it will override the default "next" icon
EVENTS1
EVENTDESCRIPTIONTYPE
onPaginationChangeFired when the page or page size changes. Detail: `{ pageNumber, pageSize, totalRecordSize }`.CustomEvent
PUBLIC METHODS10
METHODDESCRIPTION
handleOnKeydown()Handles keyboard events (keydown) 1. Closes all popovers if 'Escape' key is pressed 2. Handles page item click based on the selected item
handleOnClickPrev()Handle on click of previous
handleOnClickNext()Handle on click of next
setPageItemRange()Calculating the pageItemsRange for ellipsis 1. Find if the currentItem is ellipsis 2. Find the IndexOf the ellipsis 3. pageItemsRange calculated by knowing the before and after element of ellipsis in Pages Array
setPageItems()Sets the array of page items to be displayed for pagination 1. If the number of pages is less than or equal to 6, display all page numbers 2. Otherwise, updates the array based on the currentItem for pagination display
setPageNumbers()Generates an array of page numbers based on the total number of pages needed for pagination 1. Calculates the total number of pages using the setPageLength method 2. Populates the 'pages' array with strings representing each page number from 1 to pageLength
setPageLength()Determines the total number of pages for pagination 1. Initializes the quotient as the total number of records 2. Checks if the total records are greater than 6, calculates the quotient based on page size and any remainder 3. Sets the quotient as 1 if the total records are 6 or fewer 4. Returns the calculated or default quotient as the total number of pages for pagination
setRecordsPerPageDropdownData()Generates partial data for the records per page dropdown 1. Creates an array of objects containing label and value properties 2. The 'label' property is converted to a string since the dropdown component's dataSource expects label as a string type
eventDispatch()Dispatch custom event
renderSmallPager()Renders a compact pager view - Generates HTML markup displaying pageItemsRange along with previous and next buttons - Utilizes an ordered list (ol) for the pagination elements - Includes slots for 'prev' and 'next' buttons with corresponding icons - Displays a label for the current page range
SOURCE — components/pagination/pagination.ts · Molecules/Navigation/Pagination