Introduction

Pagination helps users navigate through large sets of data split across multiple pages. It includes support for active states, disabled states, ellipsis, and size variants.

Installation

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

Usage

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

Examples

Default

Separate 32px squares, which is what UX4G specifies. The selected page is white with a primary border, not a filled block.

PaginationDefault

import {
import { Label1 } from '@/components/ui/typography';

export default function Component() {
  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

PaginationWithEllipsis

import {
import { Label1 } from '@/components/ui/typography';

export default function Component() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href='#' />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href='#'>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href='#'>2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href='#' isActive>
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href='#'>8</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href='#' />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Sizes

PaginationSizes

import {
import { Label1 } from '@/components/ui/typography';

export default function Component() {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination size='sm'>
        <PaginationContent>
          <PaginationItem>
            <PaginationLink href='#'>1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href='#' isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href='#'>3</PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
      <Pagination size='lg'>
        <PaginationContent>
          <PaginationItem>
            <PaginationLink href='#'>1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href='#' isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href='#'>3</PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  );
}

Joined Variant

variant='joined' draws the pages as a single row with shared borders. UX4G does not define this style — it comes from Bootstrap — but it is kept for anyone who wants it.

PaginationJoined

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@/components/ui/pagination';
import { Label1 } from '@/components/ui/typography';

export default function Component() {
  return (
    <Pagination variant='joined'>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href='#' aria-label='Previous page'>
            <Label1 className='sr-only'>Previous</Label1>
          </PaginationPrevious>
        </PaginationItem>
        {['1', '2', '3', '4', '5', '6', '7', '8'].map(page => (
          <PaginationItem key={page}>
            <PaginationLink href='#' isActive={page === '4'}>
              {page}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext href='#' aria-label='Next page'>
            <Label1 className='sr-only'>Next</Label1>
          </PaginationNext>
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

API Reference

Pagination

Prop	Type	Default	Description
`variant`	`'flat' \| 'joined'`	`'flat'`	`flat` is UX4G's separate squares. `joined` is the Bootstrap shared-border row. `'default'` still works as a deprecated alias for `joined`
`size`	`sm \| md \| lg`	`md`	Applies a shared size to all pagination links

PaginationLink

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Highlights as the current page
`disabled`	`boolean`	`false`	Disables the link
`size`	`sm \| md \| lg`	inherits	Overrides the container size for a single item
`variant`	`default \| flat`	inherits	Overrides the container variant for a single item

Pagination

On this page