Skip to content
omaris

Navigation

Pagination

Pagination.

import { Pagination } from 'omaris'
Learn

Examples

Basic

siblings and boundaries decide how many numbers survive the ellipsis — the footer of a list that comes from a server a page at a time.

<script lang="ts">	import { Pagination } from 'omaris';​	let page = $state(4);</script>​<div class="flex w-full flex-col items-center gap-6">	<Pagination bind:page count={12} />	<Pagination bind:page count={12} siblings={2} size="sm" /></div>

Compact and summary

compact drops to prev/next with a count, which is what a phone wants. Give it total and perPage and it writes the summary itself.

<script lang="ts">	import { Pagination } from 'omaris';​	let page = $state(2);</script>​<div class="flex w-full flex-col items-center gap-6">	<Pagination bind:page count={9} total={168} perPage={20} />	<Pagination bind:page count={9} compact /></div>

When to use it

Use it for

  • The footer of a list whose rows come from a server a page at a time. page, count, and total with perPage for the "1–10 of 240" line.
  • Pages people jump between rather than walk through: months of a report, chapters.
  • A narrow footer or a phone. compact keeps previous, next and the count.

Not for

  • A Table's own rows → its pagination prop draws this footer, and manual hands the paging to your server.
  • A feed that keeps going → a "Load more" Button under the list, or scrolling.
  • Slides, photos or cards to swipe → Carousel.
  • Switching between views of one thing → Tabs.

Do

  • Reset page to 1 when a filter, a sort or the query changes.
  • Pass total and perPage. The summary says whether the search worked.
  • Keep the page in the URL, so back and refresh land where the person was.
  • Leave siblings and boundaries at 1. The row keeps a fixed width either way; more numbers is more to read.

Don't

  • Use compact on a desktop footer where the numbers fit.
  • Change perPage without recomputing count, or the last pages point at nothing.
  • Render it for a single page. Hide it once count is 1.
Pairs with Table List Empty Skeleton Select

Quick reference

size
  • sm
  • md (default)

API

Pagination

Pagination.

The page list keeps a fixed width whatever page you're on — the window of numbers slides, and ellipses stand in for the gaps — so the control doesn't reflow under the pointer as you click through it.

The selected page isn't drawn on the button. It's a single pill living behind the row that slides to whichever number is current, so paging reads as one object moving rather than one square blinking off and another blinking on. It lands without sliding on first paint, and on a motion-reduce display it only ever lands.

import { Pagination } from 'omaris'

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root
No description in the source yet.
indicator
The selected pill. Sized and placed from the current button's own box, so it tracks whatever the size variant made that button.
page
No description in the source yet.
current
The pill behind it carries the fill, so this is only the ink.
ellipsis
No description in the source yet.
summary
The "1–10 of 240" line.
meta
Holds the rows-per-page choice and the summary, side by side.
perPage
The rows-per-page Select.

Props

page bindable

Defaults to 1

number

Current page, 1-based. Bindable.

count required
number

Total number of pages.

size

Defaults to 'md'

PaginationSize
sm
md
siblings

Defaults to 1

number

How many numbers to show around the current page.

boundaries

Defaults to 1

number

How many to always show at each end.

compact

Defaults to false

boolean

Hide the number list, leaving just previous/next.

total
number

Total rows, for the "1–10 of 240" summary.

perPage bindable
number

Rows per page, for the summary. Bindable, when perPageOptions lets it change.

perPageOptions
number[]

Offer these as a "Rows per page" choice beside the summary — [10, 25, 50, 100]. Changing it keeps the first visible row on screen by moving page to wherever that row now lands.

perPageLabel

Defaults to 'Rows per page'

string

Label for the rows-per-page choice.

onpagechange
(page: number) => void
onperpagechange
(perPage: number) => void

Called when the rows-per-page choice changes.

label

Defaults to 'Pagination'

string

Accessible name.

class
string
classes
PaginationClasses

Per-part Tailwind overrides. class still covers the root.