Pagination

The Pagination component allows you to display active page and navigate between multiple pages.

import { Pagination } from '@nextui-org/react';

Default

You can set a starting page with the initialPage prop.

Colors

You can change the color of the Pagination with the property color.

Sizes

Change the size of the entire Pagination including width, height and font-size with the size property.

Rounded

You can completely round the corners of any type of Pagination with the rounded property.

Bordered

You can change the full style towards a bodered Pagination with the bordered property.

Shadow

You can add a shadow effect with the property shadow.

Only Dots

You can completely change the style of the component and remove the internal numbers in each Pagination button with the property onlyDots.

Loop

You can make the pagination infinite with the loop property, this means that the arrow buttons are no longer in the disabled state.

No Margin

You can change the style of the entire Pagination component by removing the margin between the buttons and changing the radius with the noMargin property.

No Controls

You can remove the next and previous arrows with controls={false} property.

No Animated

You can disable the animation of the entire Modal with the property animated={false}.

Siblings

You can control the amount of active item siblings with siblings prop.

Boundaries

You can control the amount of items displayed after previous and before next buttons with boundaries prop.

APIs

Pagination Props

AttributeTypeAccepted valuesDescriptionDefault
colorNormalColorsNormalColorsChange pagination colordefault
sizeNormalSizesNormalSizesChange pagination sizemedium
pagenumber-Active page number-
initialPagenumber-Selected page on initial render1
totalnumber-Total amount of pages1
siblingsnumber-Amount on left/right side of selected page1
boundariesnumber-Amount of elements visible on left/right edges1
dotsJumpnumber-Number of pages that are added or subtracted on the '...' button5
borderedbooleantrue/falseBodered paginationfalse
roundedbooleantrue/falseRounded paginationfalse
shadowbooleantrue/falseDisplay shadow effectfalse
animatedbooleantrue/falseDisplay move and scale animationtrue
borderWeightNormalWeightsNormalWeightsBorder weight for bordered paginationnormal
loopbooleantrue/falseNon disable next/previous controlsfalse
noMarginbooleantrue/falseRemove margin amongst pagination itemsfalse
controlsbooleantrue/falseEnable/Disable pagination controlstrue
onlyDotsbooleantrue/falseShow only dots as pagination elementsfalse
onChange(page: number) => void-Callback fired after change of each page-
...HTMLAttributes'id', 'className', ...Native props-

Pagination types

Normal Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'gradient';

Normal Sizes

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Normal Weights

type NormalWeights = 'light' | 'normal' | 'bold';