Pagination

Page navigation controls with intelligent ellipsis handling. Automatically generates page numbers based on the current page and total pages.

Installation

typescript

import { Pagination } from '@happyvertical/smrt-svelte';

Basic Usage

Simple pagination with current page highlighted.

svelte

<Pagination currentPage={1} totalPages={5} />

Middle Page

Navigation centered around the current page.

svelte

<Pagination currentPage={3} totalPages={5} />

Last Page

Next button disabled when on the last page.

svelte

<Pagination currentPage={5} totalPages={5} />

Many Pages (with Ellipsis)

For many pages, ellipsis are shown to indicate hidden pages.

svelte

<Pagination currentPage={5} totalPages={20} />

Near Start

Ellipsis positioning when near the beginning.

svelte

<Pagination currentPage={2} totalPages={20} />

Near End

Ellipsis positioning when near the end.

svelte

<Pagination currentPage={19} totalPages={20} />

Custom Base URL

Specify a custom base URL for the pagination links.

svelte

<Pagination
  currentPage={1}
  totalPages={10}
  baseUrl="/products"
/>

URL Structure

The pagination component generates URLs as follows:

Page 1: /baseUrl
Page 2+: /baseUrl/page/2, /baseUrl/page/3, etc.

Props

Prop	Type	Default	Description
`currentPage` *	`number`	-	Current active page (1-indexed)
`totalPages` *	`number`	-	Total number of pages
`baseUrl`	`string`	`'/articles'`	Base URL for pagination links (link mode)
`onPageChange`	`(page: number) => void`	-	When provided, renders buttons instead of links and calls this on page change
`showFirstLast`	`boolean`	-	Show first/last page buttons
`maxVisible`	`number`	-	Maximum number of visible page numbers
`aria-label`	`string`	-	Accessible label for the pagination nav

TypeScript

typescript

import { Pagination } from '@happyvertical/smrt-svelte';

interface Props {
  currentPage: number;
  totalPages: number;
  baseUrl?: string;
  onPageChange?: (page: number) => void;
  showFirstLast?: boolean;
  maxVisible?: number;
  'aria-label'?: string;
}

Accessibility

The pagination component includes:

aria-label="Pagination" on the nav element
aria-current="page" on the current page
aria-label on prev/next links
Disabled buttons are marked with aria-hidden