navigationpagination

Pagination

Page navigation component with configurable sibling count and edge display.

Import#

import { Pagination } from 'moraine'

Slot Structure#

Page controls with previous, next, and numbered page link buttons.

root
└── list
    ├── item (prev)
    │   └── prev (Button)
    ├── item (×n, page links)
    │   └── link (Button)
    └── item (next)
        └── next (Button)

Examples#

Variants#

Render controls as links and override variant pairing when needed.

1
function Variants() {
2
  return (
3
    <Pagination
4
      total={60}
5
      itemsPerPage={10}
6
      to={(nextPage) => `#pagination&page=${nextPage}`}
7
      variant="outline"
8
      activeVariant="default"
9
      controlVariant="secondary"
10
    />
11
  )
12
}

Sizes#

Size scale from xs to xl for page links and previous/next controls.

1
function Sizes() {
2
  const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const
3

4
  return (
5
    <div class="space-y-4">
6
      <For each={SIZES}>
7
        {(size) => (
8
          <div class="space-y-1">
9
            <p class="text-xs text-muted-foreground font-mono">{size}</p>
10
            <Pagination
11
              size={size}
12
              total={120}
13
              itemsPerPage={10}
14
              siblingCount={1}
15
              prevText="Prev"
16
              nextText="Next"
17
            />
18
          </div>
19
        )}
20
      </For>
21
    </div>
22
  )
23
}

Controlled#

Default ghost + outline controls with external page state management.

1
function Controlled() {
2
  const [page, setPage] = createSignal(3)
3

4
  return (
5
    <div class="space-y-3">
6
      <Pagination
7
        page={page()}
8
        onPageChange={setPage}
9
        total={120}
10
        itemsPerPage={10}
11
        siblingCount={1}
12
        prevText="Previous"
13
        nextText="Next"
14
      />
15
      <p class="text-xs text-muted-foreground">Current page: {page()}</p>
16
    </div>
17
  )
18
}

Minimal#

Hide prev/next controls and show only page buttons.

API Reference#

Attributes#

Slotroot5 attributes

Navigation container for page controls.

Data Attributes

Data Attribute	Description
data-orientation	Stores the rendered orientation.
data-size	Stores the resolved size variant.
data-variant	Stores the resolved visual variant.

ARIA Attributes

ARIA Attribute	Description
aria-label	Provides an accessible label when visible text is not sufficient.
role	Defines the semantic role exposed to assistive technology.

Props#

Prop	Type	Default	Description
activeVariant	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| undefined`	`outline`	Visual variant for the active page button.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`PaginationT.Classes \| undefined`	—	Slot-based class overrides.
controlVariant	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| undefined`	`ghost`	Visual variant for the previous/next control buttons.
defaultPage	`number \| undefined`	`1`	Initial page number when uncontrolled.
disabled	`boolean \| undefined`	—	Whether the pagination is disabled.
ellipsisIcon	`IconT.Name`	`icon-ellipsis`	Icon name for the ellipsis indicator.
itemsPerPage	`number \| undefined`	`10`	Number of items to display per page.
nextIcon	`IconT.Name`	`icon-chevron-right`	Icon name for the next button.
nextText	`string \| undefined`	—	Text to display in the next button.
onPageChange	`((page: number) => void) \| undefined`	—	Callback triggered when the page changes.
page	`number \| undefined`	—	Controlled current page number (1-indexed).
prevIcon	`IconT.Name`	`icon-chevron-left`	Icon name for the previous button.
prevText	`string \| undefined`	—	Text to display in the previous button.
ref	`JSX.HTMLElementTags["nav"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
showControls	`boolean \| undefined`	`true`	Whether to show previous and next control buttons.
siblingCount	`number \| undefined`	`2`	Number of page buttons to show on either side of the current page.
size	`FormFieldSize \| undefined`	`md`	Size of the pagination buttons.
style	`JSX.CSSProperties \| undefined`	—	—
styles	`PaginationT.Styles \| undefined`	—	Slot-based style overrides.
to	`((page: number) => string \| undefined) \| undefined`	—	Function to generate a destination URL for a given page number. If provided, pagination items will render as anchor tags.
total	`number \| undefined`	`0`	Total number of items across all pages.
variant	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| undefined`	`ghost`	Visual variant for the page buttons.