Pagination
Pagination for navigating between pages. Supports Numeric and Text types, configurable placement, mobile layout, and RTL.
Loading preview…
1
<Pagination2
type="numeric"3
placement="center"4
page={page}5
totalPages={12}Installation
npx sdaia-ui@latest add pagination
Usage
import { Pagination } from "@/components/ui/pagination"<Pagination type="numeric" placement="center" />Examples
Numeric
Pagination with numbered page buttons.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { Pagination } from 'sdaia-ui';5
Text
Pagination with previous and next text labels instead of numbers.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { Pagination } from 'sdaia-ui';5
Placement
Pagination aligned to the start, center, or end of its container.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { Pagination } from 'sdaia-ui';5
Mobile
Compact pagination layout optimised for mobile screens.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { Pagination } from 'sdaia-ui';5
API Reference
PaginationProps
Props for the Pagination component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'numeric' | 'text' | 'button' | "numeric" | optional |
placement | 'start' | 'center' | 'end' | "start" | optional |
mobile | boolean | false | optional |
rtl | boolean | false | optional |
page | number | mobile ? 2 : 3 | optional |
totalPages | number | mobile ? 8 : 12 | optional |
onPageChange | (page: number) => void | - | optional |