Skip to main content

​
Overview

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

​
Basic Usage

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

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

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