Svelte Pagination

The Svelte pagination component consists of button-like styled links, that are arranged side by side in a horizontal list. Pagination is built with list HTML elements so screen readers can announce the number of available links.

Learn how to create nice looking pagination using these Svelte pagination examples to indicate a series of related content exists across multiple pages and to navigate through pages easily.

Example

<BasePagination per-page="10" total="50"></BasePagination>

Disabled and active states

<BasePagination currentPage={currentPage} per-page="10" total="50"></BasePagination>

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

<BasePagination className="pagination-lg" per-page="10" total="50"></BasePagination>

  <BasePagination className="pagination-sm" per-page="10" total="50"></BasePagination>

Alignment

Change the alignment of pagination components with flexbox utilities.

<div class="d-flex justify-content-center flex-row w-100">
  <BasePagination currentPage={currentPage} per-page="10" total="50"></BasePagination>
</div>

<div class="d-flex justify-content-end flex-row w-100">
  <BasePagination currentPage={currentPage} per-page="10" total="50"></BasePagination>
</div>