# Pagination
Links that move between the pages of a long list.
```tsx
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@zenoxai/ui/components/pagination"
function PaginationDemo() {
return (
1
2
313
)
}
```
## Usage
```tsx
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@zenoxai/ui/components/pagination"
```
```tsx
2
```
Use pagination under a list or table when the page number belongs in the URL, so the user can
share or bookmark a page. Every part is a link: give each one an `href`. Mark the current page
with `isActive`: it takes the selection colors (a primary-soft fill and text with a primary
border), like the current entry of a [Sidebar](/components/sidebar).
Show the first page, the last page and the neighbors of the current one, and replace the gaps
with `PaginationEllipsis`. For feeds where the position does not matter, load more rows on
demand instead of paginating.
## Examples
### Previous and next only
For long result sets where jumping to a page number is not useful, keep only the arrows and
state the range next to them.
```tsx
import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from "@zenoxai/ui/components/pagination"
function PaginationPreviousNext() {
return (
Showing 26 to 50 of 312 alerts
)
}
```
### Controlled
When the page lives in component state, handle `onClick`, call `event.preventDefault()` and
update the state. On the first and last page, set `aria-disabled` on the arrow and style it:
the links have no `disabled` prop.
```tsx
import * as React from "react"
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@zenoxai/ui/components/pagination"
function PaginationControlled() {
const pageCount = 5
const [page, setPage] = React.useState(1)
return (
{
event.preventDefault()
setPage((current) => Math.max(1, current - 1))
}}
/>
{Array.from({ length: pageCount }, (_, index) => index + 1).map(
(number) => (
{
event.preventDefault()
setPage(number)
}}
>
{number}
)
)}
{
event.preventDefault()
setPage((current) => Math.min(pageCount, current + 1))
}}
/>
)
}
```
## Accessibility
- `Pagination` is a `