Pagination

import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@hanzo/ui'

Default

Previous and next links flank a run of page numbers, one of them current.

export function Default() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

With ellipsis

A gap too long to enumerate collapses to a single decorative marker.

export function WithEllipsis() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">8</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            9
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">10</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">20</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Compact

Page numbers alone, at the icon size, with no previous/next labels.

export function Compact() {
  return (
    <Pagination>
      <PaginationContent>
        {[1, 2, 3, 4, 5].map((page) => (
          <PaginationItem key={page}>
            <PaginationLink href="#" isActive={page === 3}>
              {page}
            </PaginationLink>
          </PaginationItem>
        ))}
      </PaginationContent>
    </Pagination>
  )
}

Types

export type PaginationProps = React.ComponentProps<typeof Nav>

export type PaginationContentProps = React.ComponentProps<typeof List>

export type PaginationItemProps = React.ComponentProps<typeof Item>

export type PaginationLinkProps = {
  isActive?: boolean
  size?: ButtonSize
  href?: string
} & Omit<React.ComponentProps<typeof Button>, 'variant' | 'size' | 'asChild'>

export type PaginationPreviousProps = Omit<PaginationLinkProps, 'size' | 'children'>

export type PaginationNextProps = Omit<PaginationLinkProps, 'size' | 'children'>

export type PaginationEllipsisProps = React.ComponentProps<typeof Ellipsis>

Exports

PaginationPaginationContentPaginationEllipsisPaginationItemPaginationLinkPaginationNextPaginationPrevioustype PaginationContentPropstype PaginationEllipsisPropstype PaginationItemPropstype PaginationLinkPropstype PaginationNextPropstype PaginationPreviousPropstype PaginationProps