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...
공식 문서 열기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.