전체 카탈로그
NavigationPagination15 props

Pagination

Pagination lets users step through pages of content. Place it below a table, list, or card grid so users can move forward and backward through results. Pick a variant to match t...

공식 문서 열기
live previewNavigation

Preview

Import

import {Pagination} from '@astryxdesign/core/Pagination';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

Pagination lets users step through pages of content. Place it below a table, list, or card grid so users can move forward and backward through results. Pick a variant to match t...

paginationpagerpaginatorpagenavigationpagingpaginatepagespagecontrol

Important props

changeAction(page: number) => void | Promise<void>optional
variantpages | count | compact | dots | noneoptional
sizesm | mdoptional

Theming targets

astryx-paginationastryx-pagination-dot

Best practices

  • DoPlace pagination below the content it controls so users see results before navigating.
  • DoUse the pages variant for data tables where users need to jump to a specific page.
  • DoUse the count variant with a page size selector when users need to control how many items they see at once.
  • DoUse the dots variant for carousels and walkthroughs where the total is small and position matters more than a number.