Pagination · amezquita design system

Import

import { Pagination } from '@amezquita/design-system/components/patterns/Pagination'

Live render

Props

Prop	Type	Description
`currentPage`	`number`
`totalPages`	`number`
`onPageChange`	`(page: number) => void`
`compact?`	`boolean`
`className?`	`string`
`label?`	`string`	Accessible name for the nav landmark — override when a page renders more than one pagination.

Tokens

Token	Type	Value
`--pagination-button-background`	color	`transparent`
`--pagination-button-font-size`	dimension	`14px`
`--pagination-button-font-weight`	fontWeight	`500`
`--pagination-button-size`	dimension	`48px`

Usage example

tsx

() => {
  const [page, setPage] = useState(5)
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'flex-start' }}>
      <p style={{ margin: 0, fontSize: '13px', color: 'var(--color-text-secondary)' }}>
        Page {page} of 10
      </p>
      <Pagination currentPage={page} totalPages={10} onPageChange={setPage} />
    </div>
  )
}