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>controlNextProps
Description
Props for next of the control button element.
Type
HTMLUIProps<"button">controlPrevProps
Description
Props for previous of the control button element.
Type
HTMLUIProps<"button">controlProps
Description
Props for control button element.
Type
HTMLUIProps<"button">defaultPage
Description
The initial page of the pagination.
Should be less than total and greater than 1.
Type
numberDefault
1edgeFirstProps
Description
Props for first of the edge button element.
Type
HTMLUIProps<"button">edgeLastProps
Description
Props for last of the edge button element.
Type
HTMLUIProps<"button">edgeProps
Description
Props for edge button element.
Type
HTMLUIProps<"button">innerProps
Description
Props for inner element.
Type
HTMLUIPropsisDisabled
Description
If true, the pagination all item will be disabled.
Type
booleanDefault
falseitemProps
Description
Props for button element.
Type
HTMLUIProps<"button">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
"md"variant
Description
The variant of the Pagination.
Type
"ghost" | "outline" | "solid" | "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
1isDisabled
Description
If true, the pagination all item will be disabled.
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