Pagination

Display active page and navigate between multiple pages.

#
Documentation

#
Usage

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

#
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.

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={10} />
    </Flex>
  );
}

#
Props

#
`Pagination`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
boundaries	`number` = `"1"`
defaultPage	`number`
disabled	`false \| true`
onPageChange	`(offset: number) => void`
page	`number`
siblings	`number` = `"1"`
total*	`number`

#
Changelog

#
0.1.0

Added component

Link Tabs

Pagination

#Documentation

#Usage

#Controlled

#Props

#Pagination

#Changelog

#0.1.0