Pagination
Links between pages of a list, with the current page marked.
Usage
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@zynactra/ui/pagination"<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="?page=1" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="?page=2" isActive>2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext href="?page=3" />
</PaginationItem>
</PaginationContent>
</Pagination>Guidelines
- Always show the first and last page; collapse the middle with
PaginationEllipsis. - Put the page in the URL (
?page=2) so it can be shared and survives a refresh. - For feeds, use "Load more" or infinite scroll instead. Pagination is for lists people navigate, like tables.