total
RequiredDescription
The total number of pages in pagination.
Type
numberPagination
Pagination is a component for managing the pagination and navigation of content.
Props
PaginationProps
boundaries
Description
Number of elements visible on the left/right edges.
Type
UIValue<number>Default
1colorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Default
"primary"component
Description
The pagination button component to use.
Type
FC<PaginationItemProps>containerProps
Description
Props for container element.
Type
HTMLUIProps<"nav">controlNextProps
Description
Props for next of the control button element.
Type
Omit<PaginationItemProps, "page">controlPrevProps
Description
Props for previous of the control button element.
Type
Omit<PaginationItemProps, "page">controlProps
Description
Props for control button element.
Type
Omit<PaginationItemProps, "page">defaultPage
Description
The initial page of the pagination.
Should be less than total and greater than 1.
Type
numberDefault
1disabled
Description
If true, the pagination all item will be disabled.
Type
booleanDefault
falseedgeFirstProps
Description
Props for first of the edge button element.
Type
Omit<PaginationItemProps, "page">edgeLastProps
Description
Props for last of the edge button element.
Type
Omit<PaginationItemProps, "page">edgeProps
Description
Props for edge button element.
Type
Omit<PaginationItemProps, "page">isDisabled
DeprecatedDescription
If true, the pagination all item will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseitemProps
Description
Props for button element.
Type
Omit<PaginationItemProps, "page">onChange
Description
The callback invoked when the page changes.
Type
(page: number) => voidpage
Description
The page of the pagination.
Should be less than total and greater than 1.
Type
numbersiblings
Description
Number of siblings displayed on the left/right side of selected page.
Type
UIValue<number>Default
1size
Description
The size of the Pagination.
Type
"xs" | "sm" | "md" | "lg" | "xl"Default
"sm"variant
Description
The variant of the Pagination.
Type
"ghost" | "outline" | "solid" | "subtle" | "surface" | "unstyled"Default
"solid"withControls
Description
If true, display the control buttons.
Type
UIValue<boolean>Default
truewithEdges
Description
If true, display the edge buttons.
Type
UIValue<boolean>Default
falseUsePaginationProps
total
RequiredDescription
The total number of pages in pagination.
Type
numberboundaries
Description
Number of elements visible on the left/right edges.
Type
UIValue<number>Default
1defaultPage
Description
The initial page of the pagination.
Should be less than total and greater than 1.
Type
numberDefault
1disabled
Description
If true, the pagination all item will be disabled.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, the pagination all item will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseonChange
Description
The callback invoked when the page changes.
Type
(page: number) => voidpage
Description
The page of the pagination.
Should be less than total and greater than 1.
Type
numbersiblings
Description
Number of siblings displayed on the left/right side of selected page.
Type
UIValue<number>Default
1Edit this page on GitHub