Pagination

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

Installation

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

Basic Usage

Simple pagination with current page highlighted.

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

Middle Page

Navigation centered around the current page.

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

Last Page

Next button disabled when on the last page.

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

Many Pages (with Ellipsis)

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

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

Near Start

Ellipsis positioning when near the beginning.

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

Near End

Ellipsis positioning when near the end.

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

Custom Base URL

Specify a custom base URL for the pagination links.

<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

TypeScript

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

interface Props {
  currentPage: number;
  totalPages: number;
  baseUrl?: 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