Pagination component allows users to navigate through a set of pages.
Experiment with all the properties of the Pagination component in real time.
The current active page.
The total number of pages.
Number of visible page buttons.
Defines the visual style of the pagination buttons.
Controls the size of the buttons.
Defines the border radius of the buttons.
Show buttons to go to the first and last page.
Show buttons to go to the previous and next page.
Disables all pagination buttons.
import { Pagination } from "lambda-ui-components";
import { useState } from "react";
export default function App() {
const [page, setPage] = useState(1);
return (
<Pagination
currentPage={page}
totalPages={10}
onPageChange={setPage}
variant="outline"
size="medium"
/>
);
}Prop | Default | Type |
|---|---|---|
currentPage | undefined | number |
totalPages | undefined | number |
onPageChange | undefined | (page: number) => void |
maxVisiblePages | 5 | number |
showFirstLastButtons | true | boolean |
showPrevNextButtons | true | boolean |
disabled | false | boolean |
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "small" | "none" | "tiny" | "small" | "medium" | "large" | "full" |
variant | "outline" | "outline" | "soft" | "solid" | "bordered" |
ariaLabel | "Page navigation" | string |