Pagination
Page navigation with smart ellipsis, keyboard accessibility, and Schema.org markup.
Default Pagination
Interactive pagination with 10 total pages. Click the buttons to navigate between pages.
Current page: 1
Few Pages
With only 3 total pages, all page numbers are shown without any ellipsis.
Many Pages
With 50 total pages starting at page 25, ellipsis appears on both sides of the current page range.
Without First/Last
The first and last page buttons are hidden using showFirstLast=false.
Sibling Count
With siblingCount=2, more page numbers are visible around the current page.
Sizes
Pagination is available in three sizes: small, medium (default), and large.
Small
Medium
Large
Accessibility Notes
The Pagination component is built with accessibility in mind. It renders as a nav landmark with an aria-label for screen readers. The active page button receives aria-current="page" to indicate the current location. Previous and next buttons include descriptive aria-labels so their purpose is clear without visual context. The component also includes Schema.org SiteNavigationElement markup for enhanced search engine understanding.