Pagination

Data pagination for page navigation.

Basic Usage

Set total to define total items. Page count is calculated automatically.

import { Pagination } from '@airo-ui/react'

function Demo() {
  return <Pagination total={50} />
}

More Pages

Ellipsis auto-appears when there are many pages.

<Pagination total={200} />

Controlled Current Page

import { useState } from 'react'

function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <div>
      <Pagination current={current} total={100} onChange={setCurrent} />
      <p style={{ marginTop: 12, fontSize: 12, color: 'var(--color-neutral-500)' }}>
        Current: {current}
      </p>
    </div>
  )
}

Default Current Page

<Pagination defaultCurrent={3} total={100} />

Custom Page Size

<Pagination total={200} pageSize={20} />

API

Props

Name	Type	Default	Description
current	number	--	Controlled current page
defaultCurrent	number	1	Default current page (uncontrolled)
total	number	Required	Total items
pageSize	number	10	Items per page
onChange	(page: number) => void	--	Page change handler

Interaction

• Hover background color transition on buttons
• Active page highlighted with accent color
• Prev/next disabled state on first/last page
• Multi-page auto-collapse to ellipsis