reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/Pagination

Pagination

컴포넌트

페이지 넘김 네비게이션. ellipsis 포함 페이지 번호, compact/count variant, totalPages/cursor pagination, Prev/Next 버튼을 제공합니다.

indicator
관련 문서
bun add @reopt-ai/opt-ui
100%

Basic Pagination

…

현재 페이지: 1

Count · Compact · Known Pages

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

Cursor Pagination

1 페이지 · 다음 있음

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

테스트 커버리지

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이면 페이지 변경을 호출하지 않는다

관련 컴포넌트

Kbd

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

인디케이터

StatCard

트렌드 방향과 변화량을 표시하는 통계 카드.

인디케이터

CompositeZone

Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.

인디케이터

Toolbar

툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.

인디케이터

Badge

인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.

인디케이터

Spinner

로딩 상태 표시 스피너. 3가지 크기와 장식용 aria-hidden 모드를 지원합니다.

인디케이터
이전Drawer다음VirtualList

기본 사용

Command Palette를 열려면Ctrl+K를 누르세요

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

기본 사용

총 매출₩12,450,000↑ +12.5%

트렌드 변형

방문자3,420↑ +8.2%
이탈률32.1%↓ -4.3%
전환율2.4%→ 0.0%

기본 사용 (2D 그리드)

A1
A2
A3
B1
B2
B3

포커스 순환 비활성화

1
2
3

기본 사용


포커스 순환

Variants

DefaultInfoSuccessWarningError

With Dot

DefaultInfoSuccessWarningError

Sizes

SmallMedium

Sizes

Small (16px)

Medium (24px)

Large (32px)

Colors