Pagination navigation for browsing multi-page content. Renders an ordered list of page links with optional...

Pagination navigation for browsing multi-page content. Renders an ordered list of page links with optional previous/next arrow buttons. Supports disabling buttons, hiding buttons, showing ellipsis (...) for non-contiguous page ranges, and marking the active/current page. **Typical usage**: ```html <ed-pagination> <ed-pagination-item href="/page/1">1</ed-pagination-item> <ed-pagination-item href="/page/2" isActive>2</ed-pagination-item> <ed-pagination-item href="/page/3">3</ed-pagination-item> <ed-pagination-item divide>...</ed-pagination-item> <ed-pagination-item href="/page/22">22</ed-pagination-item> </ed-pagination> ``` **Properties**: - `prevButtonText`: Label for previous button (default: "Previous") - `nextButtonText`: Label for next button (default: "Next") - `removePrevButton`: Hide the previous button entirely - `removeNextButton`: Hide the next button entirely - `disablePrevButton`: Disable (gray out) the previous button - `disableNextButton`: Disable (gray out) the next button **Child component (ed-pagination-item)**: - `href`: Link destination - `isActive`: Mark as active/current page - `divide`: Show ellipsis separator for non-contiguous ranges - `divideIconName`: Icon to use for divider (default: "ellipsis") - `disabled`: Disable the item **Accessibility**: Semantic ordered list (`<ol>`) structure. Arrow buttons have visually-hidden text labels and icon-only display. Current page marked with active state.

<ed-pagination></ed-pagination>

Properties

Name Type Default Description
prevButtonText String string Pagination navigation for browsing multi-page content. Renders an ordered list of page links with optional previous/next arrow buttons. Supports disabling buttons, hiding buttons, showing ellipsis (...) for non-contiguous page ranges, and marking the active/current page. **Typical usage**: ```html <ed-pagination> <ed-pagination-item href="/page/1">1</ed-pagination-item> <ed-pagination-item href="/page/2" isActive>2</ed-pagination-item> <ed-pagination-item href="/page/3">3</ed-pagination-item> <ed-pagination-item divide>...</ed-pagination-item> <ed-pagination-item href="/page/22">22</ed-pagination-item> </ed-pagination> ``` **Properties**: - `prevButtonText`: Label for previous button (default: "Previous") - `nextButtonText`: Label for next button (default: "Next") - `removePrevButton`: Hide the previous button entirely - `removeNextButton`: Hide the next button entirely - `disablePrevButton`: Disable (gray out) the previous button - `disableNextButton`: Disable (gray out) the next button **Child component (ed-pagination-item)**: - `href`: Link destination - `isActive`: Mark as active/current page - `divide`: Show ellipsis separator for non-contiguous ranges - `divideIconName`: Icon to use for divider (default: "ellipsis") - `disabled`: Disable the item **Accessibility**: Semantic ordered list (`<ol>`) structure. Arrow buttons have visually-hidden text labels and icon-only display. Current page marked with active state. / export class EdPagination extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Previous button text
nextButtonText String string Next button text
removePrevButton Boolean boolean Remove Prev button
removeNextButton Boolean boolean Remove Next Button
disablePrevButton Boolean boolean Remove Prev button
disableNextButton Boolean boolean Remove Next Button

Slots

Name Description
- `ed-pagination-item` children (page numbers, dividers)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/pagination/pagination.ts