Skip to content
Paramanu v0.1.0-alpha.0

Pagination

Pagination lets users navigate through multi-page content with previous/next buttons and page numbers.

Basic Usage

import { Pagination, PaginationItem } from "@paramanu/navigation-react"


export default function App() {
return (
  <Pagination>
    <PaginationItem type="prev" disabled>Prev</PaginationItem>
    <PaginationItem active>1</PaginationItem>
    <PaginationItem>2</PaginationItem>
    <PaginationItem type="next">Next</PaginationItem>
  </Pagination>
)
}
<nav class="pm-pagination pm-pagination--default pm-pagination--md" aria-label="Pagination">
<ul>
  <li><button class="pm-pagination__item pm-pagination__item--prev" disabled>Prev</button></li>
  <li><button class="pm-pagination__item pm-pagination__item--page pm-pagination__item--active" aria-current="page">1</button></li>
  <li><button class="pm-pagination__item pm-pagination__item--page">2</button></li>
  <li><button class="pm-pagination__item pm-pagination__item--next">Next</button></li>
</ul>
</nav>