Holo Pagination

<holo-pagination> renders a nav landmark labelled “Pagination” with Previous/Next controls and a truncated list of page number buttons (collapsed with an ellipsis for large page counts). The current page is marked with aria-current="page", and the Previous/Next controls are disabled at the bounds.

When to use

Use it for:

• Moving between pages of a long, ordered set of results where the user knows the page count.
• Search results, tables and article lists split over several pages.

Don’t use it for:

• Showing the user’s position in a site hierarchy. Use Breadcrumb.
• Moving through the steps of a form. Show step state in your own wizard UI.
• Infinite lists loaded on scroll. Provide a “Load more” Button.

Live Previews

Default

<holo-pagination page="1" total-pages="5"></holo-pagination>

Many pages (ellipsis)

<holo-pagination page="10" total-pages="20" sibling-count="1"></holo-pagination>

Accessibility

The component renders a <nav> named by label (default “Pagination”) containing a <ul>. Every control is a native <button type="button">. Page buttons are named from pageLabel (default Page {page}, where {page} is replaced with the number) and the current one has aria-current="page". The previous and next buttons are named by previousLabel and nextLabel (default “Previous page” and “Next page”). At the first or last page they are natively disabled (and set aria-disabled="true"). Ellipses are aria-hidden.

Key	Action
Tab	Moves between the previous, page and next buttons
Enter, Space	Goes to the focused page

• There is no roving tabindex. Each button is a tab stop.
• The focus ring is shown with :focus-visible.
• The component emits holoPageChange but does not move focus or announce the new page. That is your job.

You provide:

• A change that is perceivable after navigation: update the heading or a live region, or move focus to the start of the new content.
• A distinct label if there are several pagination controls on one page, and translated label, previous-label, next-label and page-label for other languages.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-pagination';

Properties

Property	Attribute	Type	Default	Description
label	label	string	'Pagination'	The accessible name of the navigation landmark. Give each pagination on a page a distinct label.
nextLabel	next-label	string	'Next page'	The accessible name of the next-page button.
page	page	number	1	The current page (1-indexed). Updated when the user navigates.
pageLabel	page-label	string	'Page {page}'	The accessible name of each page button. {page} is replaced with the page number.
previousLabel	previous-label	string	'Previous page'	The accessible name of the previous-page button.
siblingCount	sibling-count	number	1	How many page numbers to show on either side of the current page.
totalPages	total-pages	number	1	The total number of pages.

Events

Event	Detail	Description
holoPageChange	number	Emitted when the user navigates to a different page. detail is the new page number.

CSS custom properties

Property	Description
--holo-pagination-current-bg	Background color of the current page button.
--holo-pagination-current-text-color	Text color of the current page button.
--holo-pagination-gap	Space between pagination buttons.
--holo-pagination-text-color	Text color of page buttons.