Pagination

Navigation that splits content across a sequence of numbered pages.

Default

Pagination is an accessible <nav> wrapping a Pagination.Content list of Pagination.Items, with the current page marked by active.

tsx

import { Pagination } from "@hummingbirdui/react";
import { ChevronLeft, ChevronRight } from "lucide-react";

export default function PaginationDefault() {
  return (
    <Pagination>
      <Pagination.Content>
        <Pagination.Item disabled>
          <Pagination.Link href="#">
            <ChevronLeft className="size-4" />
          </Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">1</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item active>
          <Pagination.Link href="#">2</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">3</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">
            <ChevronRight className="size-4" />
          </Pagination.Link>
        </Pagination.Item>
      </Pagination.Content>
    </Pagination>
  );
}

Sizes

The size prop on Pagination offers sm, md (default), and lg.

tsx

import { Pagination } from "@hummingbirdui/react";
import { ChevronLeft, ChevronRight } from "lucide-react";

export default function PaginationSizes() {
  return (
    <div className="flex flex-col gap-3">
      <Pagination size="sm">
        <Pagination.Content>
          <Pagination.Item disabled>
            <Pagination.Link href="#">
              <ChevronLeft className="size-4" />
            </Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">1</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item active>
            <Pagination.Link href="#">2</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">3</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">
              <ChevronRight className="size-4" />
            </Pagination.Link>
          </Pagination.Item>
        </Pagination.Content>
      </Pagination>
      <Pagination>
        <Pagination.Content>
          <Pagination.Item disabled>
            <Pagination.Link href="#">
              <ChevronLeft className="size-4" />
            </Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">1</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item active>
            <Pagination.Link href="#">2</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">3</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">
              <ChevronRight className="size-4" />
            </Pagination.Link>
          </Pagination.Item>
        </Pagination.Content>
      </Pagination>
      <Pagination size="lg">
        <Pagination.Content>
          <Pagination.Item disabled>
            <Pagination.Link href="#">
              <ChevronLeft className="size-4" />
            </Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">1</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item active>
            <Pagination.Link href="#">2</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">3</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">
              <ChevronRight className="size-4" />
            </Pagination.Link>
          </Pagination.Item>
        </Pagination.Content>
      </Pagination>
    </div>
  );
}

Circle

The shape="circle" prop on Pagination renders rounded page links.

tsx

import { Pagination } from "@hummingbirdui/react";
import { ChevronLeft, ChevronRight } from "lucide-react";

export default function PaginationCircle() {
  return (
    <Pagination shape="circle">
      <Pagination.Content>
        <Pagination.Item disabled>
          <Pagination.Link href="#">
            <ChevronLeft className="size-4" />
          </Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">1</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item active>
          <Pagination.Link href="#">2</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">3</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">
            <ChevronRight className="size-4" />
          </Pagination.Link>
        </Pagination.Item>
      </Pagination.Content>
    </Pagination>
  );
}

Variants

The variant prop on Pagination sets the active-page treatment: filled (default), subtle, or outlined.

tsx

import { Pagination } from "@hummingbirdui/react";

export default function PaginationVariants() {
  return (
    <div className="flex flex-col gap-3">
      <Pagination variant="filled">
        <Pagination.Content>
          <Pagination.Item>
            <Pagination.Link href="#">1</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item active>
            <Pagination.Link href="#">2</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">3</Pagination.Link>
          </Pagination.Item>
        </Pagination.Content>
      </Pagination>
      <Pagination variant="subtle">
        <Pagination.Content>
          <Pagination.Item>
            <Pagination.Link href="#">1</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item active>
            <Pagination.Link href="#">2</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">3</Pagination.Link>
          </Pagination.Item>
        </Pagination.Content>
      </Pagination>
      <Pagination variant="outlined">
        <Pagination.Content>
          <Pagination.Item>
            <Pagination.Link href="#">1</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item active>
            <Pagination.Link href="#">2</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">3</Pagination.Link>
          </Pagination.Item>
        </Pagination.Content>
      </Pagination>
    </div>
  );
}

Colors

The color prop on Pagination conveys intent with primary (default), secondary, info, success, warning, danger, or neutral.

tsx

import { Pagination } from "@hummingbirdui/react";

const colors = [
  "primary",
  "secondary",
  "info",
  "success",
  "warning",
  "danger",
  "neutral",
] as const;

export default function PaginationColors() {
  return (
    <div className="flex flex-col gap-3">
      {colors.map((color) => (
        <Pagination key={color} color={color}>
          <Pagination.Content>
            <Pagination.Item>
              <Pagination.Link href="#">1</Pagination.Link>
            </Pagination.Item>
            <Pagination.Item active>
              <Pagination.Link href="#">2</Pagination.Link>
            </Pagination.Item>
            <Pagination.Item>
              <Pagination.Link href="#">3</Pagination.Link>
            </Pagination.Item>
          </Pagination.Content>
        </Pagination>
      ))}
    </div>
  );
}

Disabled

The disabled prop on Pagination.Item mutes and deactivates a control such as the previous link.

tsx

import { Pagination } from "@hummingbirdui/react";

export default function PaginationDisabled() {
  return (
    <Pagination>
      <Pagination.Content>
        <Pagination.Item disabled>
          <Pagination.Link href="#">Prev</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item active>
          <Pagination.Link href="#">1</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">2</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">3</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">Next</Pagination.Link>
        </Pagination.Item>
      </Pagination.Content>
    </Pagination>
  );
}

API Reference

Pagination

The accessible <nav> wrapper. Variant props set here apply to the whole pagination.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`shape`	`"default" \| "circle"`	`"default"`
`variant`	`"filled" \| "subtle" \| "outlined"`	`"filled"`
`color`	`"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "neutral"`	`"primary"`
`className`	`string`	—

Pagination.Content

The <ul> list of page items.

Pagination.Item

Prop	Type	Default
`active`	`boolean`	`false`
`disabled`	`boolean`	`false`
`className`	`string`	—

Pagination.Link

Inherits the current-page state from its parent Pagination.Item and sets aria-current="page" automatically.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Styling

Hummingbird React pagination is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available pagination classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousNavbar NextPopover