Pagination
Storybook
Go to StoryButtonPaginationProps
Defined in: src/components/Pagination/ButtonPagination/ButtonPagination.tsx:24
Extends
UsePaginationProps
Properties
| Property | Type | Description | Overrides | Inherited from | Defined in |
|---|---|---|---|---|---|
initialPage? | number | The selected page on initial render. Default 1 | - | UsePaginationProps.initialPage | node_modules/@nextui-org/use-pagination/dist/index.d.ts:15 |
siblings? | number | The number of pages to show on each side of the current page. Default 1 | - | UsePaginationProps.siblings | node_modules/@nextui-org/use-pagination/dist/index.d.ts:24 |
boundaries? | number | The number of pages to show at the beginning and end of the pagination. Default 1 | - | UsePaginationProps.boundaries | node_modules/@nextui-org/use-pagination/dist/index.d.ts:29 |
showControls? | boolean | If true, the range will include "prev" and "next" buttons. Default false | - | UsePaginationProps.showControls | node_modules/@nextui-org/use-pagination/dist/index.d.ts:34 |
onChange? | (page) => void | Callback fired when the page changes. | - | UsePaginationProps.onChange | node_modules/@nextui-org/use-pagination/dist/index.d.ts:38 |
total | number | The total number of pages. | UsePaginationProps.total | - | src/components/Pagination/ButtonPagination/ButtonPagination.tsx:25 |
page | number | Currently selected page, 1-based. | UsePaginationProps.page | - | src/components/Pagination/ButtonPagination/ButtonPagination.tsx:29 |
onPageChange | (page) => void | - | - | - | src/components/Pagination/ButtonPagination/ButtonPagination.tsx:30 |
LinkPaginationProps
Defined in: src/components/Pagination/LinkPagination/LinkPagination.tsx:27
Extends
UsePaginationProps
Properties
| Property | Type | Description | Overrides | Inherited from | Defined in |
|---|---|---|---|---|---|
initialPage? | number | The selected page on initial render. Default 1 | - | UsePaginationProps.initialPage | node_modules/@nextui-org/use-pagination/dist/index.d.ts:15 |
siblings? | number | The number of pages to show on each side of the current page. Default 1 | - | UsePaginationProps.siblings | node_modules/@nextui-org/use-pagination/dist/index.d.ts:24 |
boundaries? | number | The number of pages to show at the beginning and end of the pagination. Default 1 | - | UsePaginationProps.boundaries | node_modules/@nextui-org/use-pagination/dist/index.d.ts:29 |
showControls? | boolean | If true, the range will include "prev" and "next" buttons. Default false | - | UsePaginationProps.showControls | node_modules/@nextui-org/use-pagination/dist/index.d.ts:34 |
onChange? | (page) => void | Callback fired when the page changes. | - | UsePaginationProps.onChange | node_modules/@nextui-org/use-pagination/dist/index.d.ts:38 |
total | number | Maximum number of available pages. | UsePaginationProps.total | - | src/components/Pagination/LinkPagination/LinkPagination.tsx:31 |
page | number | Currently selected page, 1-based. | UsePaginationProps.page | - | src/components/Pagination/LinkPagination/LinkPagination.tsx:35 |
getHref | (page) => string | Translates page number to URL. Example (page) => "/users?page=" + page | - | - | src/components/Pagination/LinkPagination/LinkPagination.tsx:44 |
ButtonPagination()
function ButtonPagination(__namedParameters): Element;
Defined in: src/components/Pagination/ButtonPagination/ButtonPagination.tsx:36
Complete state-controlled pagination.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | ButtonPaginationProps |
Returns
Element
LinkPagination()
function LinkPagination(__namedParameters): Element;
Defined in: src/components/Pagination/LinkPagination/LinkPagination.tsx:50
Complete link-based pagination.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | LinkPaginationProps |
Returns
Element
Pagination()
function Pagination(__namedParameters): Element;
Defined in: src/components/Pagination/Pagination.tsx:18
Primitives to build your Pagination.
If you're looking for batteries-included components, see ButtonPagination and LinkPagination.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<HTMLAttributes<HTMLElement>> |
Returns
Element
PaginationContent()
function PaginationContent(__namedParameters): Element;
Defined in: src/components/Pagination/Pagination.tsx:35
Container for pagination items.
Provides proper layout and spacing for pagination controls. Renders as a semantic unordered list for accessibility. Usually contains PaginationItemContainer components.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<HTMLAttributes<HTMLUListElement>> |
Returns
Element
PaginationItemContainer()
function PaginationItemContainer(__namedParameters): Element;
Defined in: src/components/Pagination/Pagination.tsx:59
Container for individual pagination items.
Renders as a semantic list item for accessibility. Should wrap each individual pagination control.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>> |
Returns
Element
Example
<PaginationItemContainer>
<PaginationItem>1</PaginationItem>
</PaginationItemContainer>
PaginationItem()
function PaginationItem(__namedParameters): Element;
Defined in: src/components/Pagination/Pagination.tsx:94
Displays a single pagination control such as a page number or navigation action. Handles active state and proper accessibility attributes. Extends the Button component with pagination-specific behavior.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | PaginationLinkProps |
Returns
Element
Examples
<PaginationItem isActive>1</PaginationItem>
<PaginationItem aria-label="Go to previous page">
<PreviousIcon />
</PaginationItem>
PaginationPreviousIcon()
function PaginationPreviousIcon(): Element;
Defined in: src/components/Pagination/Pagination.tsx:111
Icon component for the previous page navigation button. Displays a left-pointing chevron icon.
Returns
Element
PaginationPrevious()
function PaginationPrevious(__namedParameters): Element;
Defined in: src/components/Pagination/Pagination.tsx:129
Navigation component for moving to the previous page.
Displays a button with a left chevron icon by default.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | PaginationLinkProps |
Returns
Element
Examples
<PaginationPrevious onClick={() => goToPreviousPage()} />
// custom content
<PaginationPrevious>Previous</PaginationPrevious>
PaginationNextIcon()
function PaginationNextIcon(): Element;
Defined in: src/components/Pagination/Pagination.tsx:141
Icon component for the next page navigation button. Displays a right-pointing chevron icon.
Returns
Element
PaginationNext()
function PaginationNext(__namedParameters): Element;
Defined in: src/components/Pagination/Pagination.tsx:159
Navigation component for moving to the next page.
Displays a button with a right chevron icon by default.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | PaginationLinkProps |
Returns
Element
Examples
<PaginationNext onClick={() => goToNextPage()} />
// custom content
<PaginationNext>Next</PaginationNext>
PaginationEllipsis()
function PaginationEllipsis(__namedParameters): Element;
Defined in: src/components/Pagination/Pagination.tsx:182
Ellipsis component for pagination.
Indicates that pages have been omitted in the pagination sequence. Hidden from screen readers while providing an appropriate screen reader text. Commonly used when there are too many pages to display all page numbers.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>> |
Returns
Element
Example
<PaginationItemContainer>
<PaginationEllipsis />
</PaginationItemContainer>