ComponentsPagination

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.

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

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