Pagination

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/pagination.css" />

<script src="/guide/js/components/pagination.js"></script>

Live

Button States

Default
Active
Disabled
Nav — Default
Nav — Disabled

Specs

요소 Size Gap Font Border Radius Active BG
Pagination Button 36×36px 4px (--spacing-1) 14px / Regular 4px --color-primary-active (green-800)

Code

<nav class="pagination" aria-label="페이지 네비게이션">
  <button class="pagination__btn pagination__btn--nav"
          data-action="first" aria-label="첫 페이지">&laquo;</button>
  <button class="pagination__btn pagination__btn--nav"
          data-action="prev"  aria-label="이전 페이지">&lsaquo;</button>
  <button class="pagination__btn" data-page="1">1</button>
  <button class="pagination__btn pagination__btn--active"
          data-page="2" aria-current="page">2</button>
  <button class="pagination__btn" data-page="3">3</button>
  <button class="pagination__btn pagination__btn--nav"
          data-action="next" aria-label="다음 페이지">&rsaquo;</button>
  <button class="pagination__btn pagination__btn--nav"
          data-action="last" aria-label="마지막 페이지">&raquo;</button>
</nav>

<script src="/guide/js/components/pagination.js"></script>

Classes

클래스 타입 설명
.pagination 루트 페이지네이션 <nav> 컨테이너
.pagination__btn 요소 페이지 버튼. data-page="N" 속성 필수
.pagination__btn--active 수정자 현재 페이지. JS가 aria-current도 토글
.pagination__btn--nav 수정자 이전/다음 버튼. data-action: first / prev / next / last