Kubit

components

Pagination

v.1.0.0 | Saturn

Import

import { Pagination } from '@kubit-ui-web/react-components'

12345

<Pagination
  variant="DEFAULT"
  currentStep={0}
  maxStepsNumber={10}
/>

Let's delve into the versatility of the pagination component by examining all its avalaible props.


Property	Type	Default	Description
variant Required	String	-	Set the component variant theme
currentStep Required	Number	-	Indicate the parent current position
maxStepsNumber Required	Number	-	Set the max steps number
maxCountersNumber	Number	-	Set the custom steps number to show
paginationLeftButtonControl	IPaginationButtonControl	-	Set the custom properties for the left button control
paginationRightButtonControl	IPaginationButtonControl	-	Set the custom properties for the right button control
onStepClick	(step: number and event: MouseEvent<HTMLButtonElement or MouseEvent>) => void	-	Set the function to execute when a step is clicked
dataTestId	String	-	Text for testing purposes
ctv	PaginationStyledProps	-	Modify styles for the default version of the component

IPaginationButtonControl is a type that contains the following properties:

icon?: string | JSX.Element: The icon of the pagination button
ariaLabel?: string: Aria label for the button
ariaControls?: string: Aria controls for the button
onClick?: (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void: On click event for the button