Density

Pagination

Full-width, controlled navigation. Previous and next use chevrons; first and last are optional double-chevron controls.

import { Pagination } from "density-base-ui";

export default function PaginationPageExample() {
  return <Pagination onPageChange={() => undefined} page={2} totalPages={5} />;
}

Page changes

import { useState } from "react";
import { Pagination } from "density-base-ui";

export default function PaginationOnPageChangeExample() {
  const [page, setPage] = useState(2);
  return (
    <>
      <Pagination onPageChange={setPage} page={page} totalPages={5} />
    </>
  );
}

Total pages

import { useState } from "react";
import { Pagination } from "density-base-ui";

export default function PaginationTotalPagesExample() {
  const [page, setPage] = useState(2);
  return <Pagination onPageChange={setPage} page={page} totalPages={3} />;
}

Show page numbers

import { useState } from "react";
import { Pagination } from "density-base-ui";

export default function PaginationShowNumbersExample() {
  const [page, setPage] = useState(5);
  return (
    <Pagination
      onPageChange={setPage}
      page={page}
      showNumbers
      totalPages={10}
    />
  );
}

Show first and last controls

import { useState } from "react";
import { Pagination } from "density-base-ui";

export default function PaginationShowFirstLastExample() {
  const [page, setPage] = useState(2);
  return (
    <Pagination
      onPageChange={setPage}
      page={page}
      showFirstLast
      totalPages={5}
    />
  );
}

Size

import { useState } from "react";
import { Pagination, View } from "density-base-ui";

const paginationSizes = [
  "2xs",
  "xs",
  "sm",
  "md",
  "lg",
  "xl",
  "2xl",
  "3xl",
] as const;

export default function PaginationSizeExample() {
  const [pagesBySize, setPagesBySize] = useState<Record<string, number>>({});

  return (
    <View>
      {paginationSizes.map((size) => (
        <Pagination
          key={size}
          onPageChange={(page) =>
            setPagesBySize((currentPages) => ({
              ...currentPages,
              [size]: page,
            }))
          }
          page={pagesBySize[size] ?? 2}
          showNumbers
          size={size}
          totalPages={5}
        />
      ))}
    </View>
  );
}

Emphasis

import { useState } from "react";
import { Pagination, View } from "density-base-ui";

const paginationEmphases = [
  "primary",
  "secondary",
  "outline",
  "ghost-primary",
  "ghost-secondary",
  "ghost-tertiary",
] as const;

export default function PaginationEmphasisExample() {
  const [pagesByEmphasis, setPagesByEmphasis] = useState<
    Record<string, number>
  >({});

  return (
    <View>
      {paginationEmphases.map((emphasis) => (
        <Pagination
          key={emphasis}
          emphasis={emphasis}
          onPageChange={(page) =>
            setPagesByEmphasis((currentPages) => ({
              ...currentPages,
              [emphasis]: page,
            }))
          }
          page={pagesByEmphasis[emphasis] ?? 2}
          showNumbers
          totalPages={5}
        />
      ))}
    </View>
  );
}