Pagination

A long list can be divided into several pages, and only one page will be loaded at a time.

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

• Basic · basic

• Align · align

• More · more

• Changer · changer

• Jumper · jump

• Size · mini

• Simple mode · simple

• Controlled · controlled

• Total number · total

• Show All · all

• Prev and next · itemRender

• Custom component · components

• Custom semantic dom styling · style-class

API

Common props ref：Common props

<Pagination onChange={onChange} total={50} />

Semantic DOM

Semantic description source: vendor/components/pagination/demo/_semantic.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Declaration source: vendor/components/pagination/style/index.ts

import { unit } from '@ant-design/cssinjs';

import type { CSSObject } from '@ant-design/cssinjs';

import {
  genBasicInputStyle,
  genInputLargeStyle,
  genInputSmallStyle,
  initComponentToken,
  initInputToken,
} from '../../input/style';

import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';

import { genBaseOutlinedStyle, genDisabledStyle } from '../../input/style/variants';

import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GenStyleFn, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

import { genCssVar } from '../../theme/util/genStyleUtils';

export interface ComponentToken {
  /**
   * @desc 页码选项背景色
   * @descEN Background color of Pagination item
   */
  itemBg: string;
  /**
   * @desc 页码尺寸
   * @descEN Size of Pagination item
   */
  itemSize: number;
  /**
   * @desc 小号页码尺寸
   * @descEN Size of small Pagination item
   */
  itemSizeSM: number;
  /**
   * @desc 大号页码尺寸
   * @descEN Size of large Pagination item
   */
  itemSizeLG: number;
  /**
   * @desc 页码激活态背景色
   * @descEN Background color of active Pagination item
   */
  itemActiveBg: string;
  /**
   * @desc 页码激活态文字颜色
   * @descEN Text color of active Pagination item
   */
  itemActiveColor: string;
  /**
   * @desc 页码激活态文字颜色悬停态
   * @descEN Text color of active Pagination item hover
   */
  itemActiveColorHover: string;
  /**
   * @desc 页码链接背景色
   * @descEN Background color of Pagination item link
   */
  itemLinkBg: string;
  /**
   * @desc 页码激活态禁用状态背景色
   * @descEN Background color of disabled active Pagination item
   */
  itemActiveBgDisabled: string;
  /**
   * @desc 页码激活态禁用状态文字颜色
   * @descEN Text color of disabled active Pagination item
   */
  itemActiveColorDisabled: string;
  /**
   * @desc 输入框背景色
   * @descEN Background color of input
   */
  itemInputBg: string;
  /**
   * @desc 每页展示数量选择器 top
   * @descEN Top of Pagination size changer
   */
  miniOptionsSizeChangerTop: number;
}

/**
 * @desc Pagination 组件的 Token
 * @descEN Token for Pagination component
 */
export interface PaginationToken
  extends FullToken<'Pagination'>, SharedComponentToken, SharedInputToken {
  /**
   * @desc 输入框轮廓偏移量
   * @descEN Outline offset of input
   */
  inputOutlineOffset: number;
  /**
   * @desc 快速跳转输入框宽度
   * @descEN Width of quick jumper input
   */
  quickJumperInputWidth: number | string;
  /**
   * @desc 迷你选项横向外边距
   * @descEN Horizontal margin of mini options
   */
  paginationMiniOptionsMarginInlineStart: number | string;
  /**
   * @desc 迷你快速跳转输入框宽度
   * @descEN Width of mini quick jumper input
   */
  paginationMiniQuickJumperInputWidth: number | string;
  /**
   * @desc 页码横向内边距
   * @descEN Horizontal padding of Pagination item
   */
  paginationItemPaddingInline: number | string;
  /**
   * @desc 省略号字母间距
   * @descEN Letter spacing of ellipsis
   * @deprecated Ellipsis is now an SVG icon, this token is no longer used.
   */
  paginationEllipsisLetterSpacing: number | string;
  /**
   * @desc 省略号文本缩进
   * @descEN Text indent of ellipsis
   * @deprecated Ellipsis is now an SVG icon, this token is no longer used.
   */
  paginationEllipsisTextIndent: string;
  /**
   * @desc 斜杠横向外边距
   * @descEN Horizontal margin of slash
   */
  paginationSlashMarginInlineStart: number;
  /**
   * @desc 斜杠横向外边距
   * @descEN Horizontal margin of slash
   */
  paginationSlashMarginInlineEnd: number;
}

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

• vendor/components/pagination/Pagination.tsx
• vendor/components/pagination/style/index.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.