Pagination

A row of page buttons. Each button is a btn; this lays them out and fills in the current one, which Kobalte's Pagination marks with aria-current and data-current.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`pagination`	The nav: lays out its ul, and fills the current page button
`pagination-ellipsis`	The gap marker between ranges

Basic

<nav class="pagination" aria-label="Pages">
  <ul>
    <li><button class="btn btn-secondary">Previous</button></li>
    <li><button class="btn btn-secondary">1</button></li>
    <li><button class="btn btn-secondary" aria-current="page">2</button></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><button class="btn btn-secondary">9</button></li>
    <li><button class="btn btn-secondary">Next</button></li>
  </ul>
</nav>

<nav class="pagination" aria-label="Pages">
  <ul>
    <li><button class="btn btn-secondary">Previous</button></li>
    <li><button class="btn btn-secondary">1</button></li>
    <li><button class="btn btn-secondary" aria-current="page">2</button></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><button class="btn btn-secondary">9</button></li>
    <li><button class="btn btn-secondary">Next</button></li>
  </ul>
</nav>

import { Pagination } from "@kobalte/core/pagination";

<Pagination
  class="pagination"
  count={9}
  page={page()}
  onPageChange={setPage}
  itemComponent={props => (
    <Pagination.Item class="btn btn-secondary" page={props.page}>
      {props.page}
    </Pagination.Item>
  )}
  ellipsisComponent={() => (
    <Pagination.Ellipsis class="pagination-ellipsis">…</Pagination.Ellipsis>
  )}
>
  <Pagination.Previous class="btn btn-secondary">Previous</Pagination.Previous>
  <Pagination.Items />
  <Pagination.Next class="btn btn-secondary">Next</Pagination.Next>
</Pagination>

<nav class="pagination" aria-label="Pages">
  <ul>
    <li><button class="btn btn-secondary">Previous</button></li>
    <li><button class="btn btn-secondary">1</button></li>
    <li><button class="btn btn-secondary" data-current aria-current="page">2</button></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><button class="btn btn-secondary">9</button></li>
    <li><button class="btn btn-secondary">Next</button></li>
  </ul>
</nav>