logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
YouMindTRACTIANLobeHubCodeRabbit
6.5.0
  • Components Overview
  • Changelog
    v6.5.0
  • General
    • Button
    • FloatButton
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
    • Grid
    • Layout
    • Masonry
      6.0.0
    • Space
    • Splitter
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
      DEPRECATED
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • App
    • BorderBeam
      6.4.0
    • ConfigProvider
    • Util
When To Use
Examples
Basic
Align
More
Changer
Jumper
Size
Simple mode
Controlled
Total number
Show All
Prev and next
Custom semantic dom styling
API
Semantic DOM
Design Token

Pagination

A long list can be divided into several pages, and only one page will be loaded at a time.
Importimport { Pagination } from 'antd';
GitHub
components/paginationIssueOpen issues
Docs
Edit this pageLLMs.md
MenuSteps

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
X
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
For Agents
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
Development
Design
loading

When To Use

  • When it will take a long time to load/render all items.
  • If you want to browse the data by navigating through pages.

Examples

API

Common props ref:Common props

jsx
<Pagination onChange={onChange} total={50} />
PropertyDescriptionTypeDefaultVersionGlobal Config
alignAlignstart | center | end-5.19.0×
classNamesCustomize class for each semantic structure inside the component. Supports object or functionRecord<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>-6.0.0
currentCurrent page numbernumber-×
defaultCurrentDefault initial page numbernumber1×
defaultPageSizeDefault number of data items per pagenumber10×
disabledDisable paginationboolean-×
hideOnSinglePageWhether to hide pager on single pagebooleanfalse×
itemRenderTo customize item's innerHTML(page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode-×
pageSizeNumber of data items per pagenumber-×
pageSizeOptionsSpecify the sizeChanger optionsnumber[][10, 20, 50, 100]×
responsiveIf size is not specified, Pagination would resize according to the width of the windowboolean-×
showLessItemsShow less page itemsbooleanfalse×
showQuickJumperDetermine whether you can jump to pages directlyboolean | { goButton: ReactNode }false×
showSizeChangerDetermine whether to show pageSize selectboolean | SelectProps-SelectProps: 5.21.04.21.0, SelectProps: 5.21.0
showTitleShow page item's titlebooleantrue×
showTotalTo display the total number and rangefunction(total, range)-×
simpleWhether to use simple modeboolean | { readOnly?: boolean }-×
sizeComponent sizelarge | medium | smallmedium×
stylesCustomize inline style for each semantic structure inside the component. Supports object or functionRecord<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties>-6.0.0
totalTotal number of data itemsnumber0×
totalBoundaryShowSizeChangerWhen total larger than it, showSizeChanger will be truenumber506.2.0
onChangeCalled when the page number or pageSize is changed, and it takes the resulting page number and pageSize as its argumentsfunction(page, pageSize)-×
onShowSizeChangeCalled when pageSize is changedfunction(current, size)-×

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
itemActiveBgBackground color of active Pagination itemstring#ffffff
itemActiveBgDisabledBackground color of disabled active Pagination itemstringrgba(0,0,0,0.15)
itemActiveColorText color of active Pagination itemstring#1677ff
itemActiveColorDisabledText color of disabled active Pagination itemstringrgba(0,0,0,0.25)
itemActiveColorHoverText color of active Pagination item hoverstring#4096ff
itemBgBackground color of Pagination itemstring#ffffff
itemInputBgBackground color of inputstring#ffffff
itemLinkBgBackground color of Pagination item linkstring#ffffff
itemSizeSize of Pagination itemnumber32
itemSizeLGSize of large Pagination itemnumber40
itemSizeSMSize of small Pagination itemnumber24
miniOptionsSizeChangerTopTop of Pagination size changernumber0
Global TokenHow to use?
Token NameDescriptionTypeDefault Value
colorBgContainerContainer background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.string#ffffff
colorBgContainerDisabledControl the background color of container in disabled state.stringrgba(0,0,0,0.04)
colorBgTextActiveControl the background color of text in active state.stringrgba(0,0,0,0.15)
colorBgTextHoverControl the background color of text in hover state.stringrgba(0,0,0,0.06)
colorBorderDefault border color, used to separate different elements, such as: form separator, card separator, etc.string#d9d9d9
colorBorderDisabledControl the border color of the element in the disabled state.string#d9d9d9
colorFillSecondaryThe second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc.stringrgba(0,0,0,0.06)
colorFillTertiaryThe third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color.stringrgba(0,0,0,0.04)
colorPrimaryBrand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.string#1677ff
colorPrimaryBorderThe stroke color under the main color gradient, used on the stroke of components such as Slider.string#91caff
colorPrimaryHoverHover state under the main color gradient.string#4096ff
colorTextDefault text color which comply with W3C standards, and this color is also the darkest neutral color.stringrgba(0,0,0,0.88)
colorTextDisabledControl the color of text in disabled state.stringrgba(0,0,0,0.25)
colorTextPlaceholderControl the color of placeholder text.stringrgba(0,0,0,0.25)
borderRadiusBorder radius of base componentsnumber6
borderRadiusLGLG size border radius, used in some large border radius components, such as Card, Modal and other components.number8
borderRadiusSMSM size border radius, used in small size components, such as Button, Input, Select and other input components in small sizenumber4
controlHeightLGLG component heightnumber40
controlOutlineControl the outline color of input component.stringrgba(5,145,255,0.1)
controlOutlineWidthControl the outline width of input component.number2
fontFamilyThe font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
fontSizeSMSmall font sizenumber12
fontWeightStrongControl the font weight of heading components (such as h1, h2, h3) or selected item.number600
lineHeightLine height of text.number1.5714285714285714
lineHeightLGLine height of large text.number1.5
lineTypeBorder style of base componentsstringsolid
lineWidthBorder width of base componentsnumber1
lineWidthFocusControl the width of the line when the component is in focus state.number3
marginControl the margin of an element, with a medium size.number16
marginSMControl the margin of an element, with a medium-small size.number12
marginXSControl the margin of an element, with a small size.number8
marginXXSControl the margin of an element, with the smallest size.number4
motionDurationMidMotion speed, medium speed. Used for medium element animation interaction.string0.2s
paddingXXSControl the extra extra small padding of the element.number4
screenLGControl the screen width of large screens.number992
screenSMControl the screen width of small screens.number576
sizeLGLarge sizenumber24
Basic

Basic pagination.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Align
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
5.19.0
More

More pages.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Changer

Change pageSize.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Jumper

Jump to a page directly.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Size

Small and large size pagination.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Simple mode

Simple mode.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Controlled

Controlled page number.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Total number

You can show the total number of data by setting showTotal.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Show All

Show all configured prop.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Prev and next

Use text link for prev and next button.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Custom semantic dom styling

You can customize the semantic dom style of Pagination by passing objects/functions through classNames and styles.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
6.0.0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

  • 1
  • 2
  • 3
  • 4
  • 5

  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 5
  • 6
  • 7
  • 50
  • 10 / page
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page

  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    Go toPage

  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    Go toPage
Small
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 10 / page
    Go toPage
  • Total 50 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • Total 50 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 10 / page
    Go toPage
Large
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 10 / page
    Go toPage
  • Total 50 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • Total 50 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 10 / page
    Go toPage
  • /5

  • 2/5

  • /5
  • 1
  • 2
  • 3
  • 4
  • 5
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 / page

  • 1-20 of 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 / page
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 9
  • 10 / page
    Go toPage
  • Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • Next
  • 10 / page
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
  • 1
  • 2
  • 3
  • 4
  • 5
  • root
    6.0.0
    Root element, set flex layout, alignment, flex wrap and list styles
  • item
    6.0.0
    Item element, set size, padding, border, background color, hover state and active state styles