Pagination

Display active page and navigate between multiple pages.

#
Documentation

#
Usage


import { Pagination } from "@optiaxiom/react";
 
export function App() {
  return <Pagination total={50} />;
}

#
Controlled

Use the page and defaultPage props to toggle between controlled and uncontrolled usage. And combine it with onPageChange to listen for changes to the state.


"use client";
 
import { Button, Flex, Pagination } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [page, setPage] = useState(5);
 
  return (
    <Flex flexDirection={["column", "row"]}>
      <Button disabled={page === 5} onClick={() => setPage(5)}>
        Reset
      </Button>
      <Pagination onPageChange={setPage} page={page} total={5} />
    </Flex>
  );
}

#
Related

Table

Display tabular data using rows and columns.

#
Props

#
Pagination

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`defaultPage` The default active page in uncontrolled mode. `number` Default: `1`
`disabled` Whether to disable all button. `false \| true`
`onPageChange` Handler that is called when the active page is changed. `(offset: number) => void`
`page` The active page in controlled mode. `number`
`total*` The total number of pages to display. `number`

#
Changelog

#
0.1.0

Added component