Pagination - DevReady Kit

Overview

The Pagination component provides page navigation with two variants: default card style and minimal style.

Basic Usage

Code
Preview

import { PaginationCardDefault } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function PaginationBasic() {
  const [page, setPage] = useState(1);

  return (
    <PaginationCardDefault
      page={page}
      totalPages={10}
      onPageChange={setPage}
    />
  );
}

Minimal Variant

Code
Preview

import { PaginationCardMinimal } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function PaginationMinimal() {
  const [page, setPage] = useState(1);

  return (
    <PaginationCardMinimal
      page={page}
      totalPages={10}
      onPageChange={setPage}
    />
  );
}

With Custom Label

Code
Preview

import { PaginationCardMinimal } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function PaginationCustomLabel() {
  const [page, setPage] = useState(1);

  return (
    <PaginationCardMinimal
      page={page}
      totalPages={10}
      onPageChange={setPage}
      labelFormatter={(page, total) => `${page} / ${total}`}
    />
  );
}

Props

PaginationCardMinimal Props