Pagination

Allows the user to select a specific page from a range of pages.

Examples

Total

Size

Sibling Count

State

Show Edges

import { Pagination } from 'kalki-design'

<Pagination>Click me</Pagination>

npx kalki-design add pagination

import { Pagination } from 'kalki-design'

export default function Example() {
  return <Pagination />
}

Name	Type	Default	Description
Name`total`	Type`number`	Default`—`	DescriptionTotal number of data items.
Name`page`	Type`number`	Default`—`	DescriptionThe current active page.
Name`onChange`	Type`(page: number) => void`	Default`—`	DescriptionCallback fired when page changes.
Name`pageSize`	Type`number`	Default`10`	DescriptionNumber of items per page.
Name`siblingCount`	Type`number`	Default`1`	DescriptionNumber of pages to show around current page before folding.
Name`size`	Type`'sm' \| 'md' \| 'lg'`	Default`'md'`	DescriptionSize of the pagination items.
Name`showEdges`	Type`boolean`	Default`true`	DescriptionWhether to show previous/next buttons.