reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Pagination
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Pagination

Component

Navigate pages with ellipses, compact and count variants, total-page or cursor pagination, and previous and next buttons.

indicator
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { Pagination } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

Basic Pagination

…

현재 페이지: 1

Count · Compact · Known Pages

1–25 / 총 247개
1 / 10 페이지

Cursor Pagination

1 페이지 · 다음 있음

전체 개수를 모르는 API는 hasMore만으로 다음 페이지를 제어할 수 있습니다.

Pagination

PropTypeDefaultDescription
totalItemsnumber—전체 항목 수
totalPagesnumber—전체 페이지 수. 전체 항목 수를 모를 때 사용
hasMoreboolean—cursor pagination에서 다음 페이지 존재 여부
pageSizenumber—페이지당 항목 수
currentPageRequirednumber—현재 페이지 (1부터 시작)
onPageChangeRequired(page: number) => void—페이지 변경 콜백
showPageNumbersbooleantrue페이지 번호 표시 여부
siblingCountnumber1현재 페이지 좌우 표시할 페이지 수
variant"pages" | "count" | "compact" | "none""pages"중앙 표시 방식
isDisabledbooleanfalse전체 pagination 비활성화
labelstring"Pagination"navigation landmark 접근성 라벨
labelsPaginationLabels—Prev/Next/page/count 접근성 및 표시 문구
View test results

테스트 커버리지

2026년 7월 9일10/10 통과
10성공
0실패
10전체
  • 현재 페이지에 aria-current를 설정한다
  • 첫 페이지에서 Prev 버튼이 비활성화된다
  • 마지막 페이지에서 Next 버튼이 비활성화된다
  • 페이지 클릭 시 onPageChange를 호출한다
  • 페이지 버튼에 목적을 설명하는 aria-label을 제공한다
  • pageSize가 0이어도 안전하게 1페이지로 수렴한다
  • totalPages만으로 페이지 수를 계산하고 currentPage를 clamp한다
  • compact cursor pagination은 알려진 총 페이지 없이 다음 이동을 허용한다
  • count variant는 현재 항목 범위를 표시한다
  • isDisabled이면 페이지 변경을 호출하지 않는다

Related components

opt-ui

Kbd

Core

Display keyboard shortcuts as inline key badges.

opt-ui

StatCard

Core

Show a metric with its value, change, and supporting description. Omit the change row when no comparison is available.

opt-ui

CompositeZone

Core

Navigate child elements in two dimensions with arrow keys using a Composite container.

opt-ui

Toolbar

Core

Group actions in a toolbar with buttons, separators, and tooltips.

opt-ui

Badge

Core

Display inline status badges with five color variants and an optional status dot.

opt-ui

Spinner

Core

Indicate loading in three sizes, with an aria-hidden mode for decorative use.

PreviousDrawerNextVirtualList