Pagination

Page navigation with numbered links.

Installation

npx @noarka/cli add pagination

Usage

tsx

import {  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,} from "@noarka/ui";

tsx

<Pagination>  <PaginationContent>    <PaginationItem>      <PaginationPrevious href="#" />    </PaginationItem>    <PaginationItem>      <PaginationLink href="#" isActive>        1      </PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">2</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">3</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationNext href="#" />    </PaginationItem>  </PaginationContent></Pagination>

Examples

Many pages

Previous/next controls with an ellipsis over skipped ranges.

Small size

Compact page buttons.

Compact

Previous/next around a page counter.

API reference

Pagination

Prop	Type	Default
`children` Usually a single PaginationContent.	`ReactNode`	`-`
`className` Additional classes merged on the nav element.	`string`	`-`

PaginationContent

Prop	Type	Default
`children` PaginationItem elements.	`ReactNode`	`-`
`className` Additional classes merged with the default row styles.	`string`	`-`

PaginationItem

Prop	Type	Default
`children` One link, control, or ellipsis.	`ReactNode`	`-`
`className` Additional classes merged on the list item.	`string`	`-`

PaginationLink

Prop	Type	Default
`href` Link target. Renders a native anchor.	`string`	`-`
`isActive` Highlight as the current page with aria-current.	`boolean`	`false`
`variant` Button style. Active links render outline regardless.	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"ghost"`
`size` Button size.	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"icon"`
`className` Additional classes merged with the button styles.	`string`	`-`

PaginationPrevious

Prop	Type	Default
`href` Link target. Renders a native anchor.	`string`	`-`
`children` Label beside the arrow. Hidden below the sm breakpoint.	`ReactNode`	`"Previous"`
`className` Additional classes merged with the default styles.	`string`	`-`

PaginationNext

Prop	Type	Default
`href` Link target. Renders a native anchor.	`string`	`-`
`children` Label beside the arrow. Hidden below the sm breakpoint.	`ReactNode`	`"Next"`
`className` Additional classes merged with the default styles.	`string`	`-`

PaginationEllipsis

Prop	Type	Default
`className` Additional classes merged with the default ellipsis styles.	`string`	`-`