The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A component for navigating through paginated content with customizable page ranges and navigation controls.
Import the Pagination component from @bun-ui/react and use it in your project:
import { Pagination } from "@bun-ui/react"<Pagination count={10} />A simple pagination component with default settings:
Manage the page state externally:
Add first and last page navigation buttons:
The Pagination component supports two variants:
Customize the color scheme of the pagination:
The Pagination component supports three sizes:
Disable the entire pagination component:
You can customize the rendering of individual pagination items using the renderItem prop.
This allows you to have full control over how each item is displayed
while maintaining the pagination logic:
| Prop | Type | Default | Description |
|---|---|---|---|
boundaryCount | number | 1 | Number of always visible pages at the beginning and end. |
color | "primary" | "secondary" | "neutral" | "neutral" | The color theme of the pagination buttons. Controls the color scheme used for the pagination items. |
count | number | 1 | The total number of pages. |
defaultPage | number | 1 | The default page number when the component is uncontrolled. |
disabled | boolean | disabled | If true, disables all pagination buttons. Useful when pagination should be temporarily disabled. |
hideNextButton | boolean | false | If true, hides the "next page" button. Useful when you want to control navigation programmatically. |
hidePrevButton | boolean | false | If true, hides the "previous page" button. Useful when you want to control navigation programmatically. |
onChange | (page: number) => void | - | Callback fired when the page changes. Called with the new page number when user clicks a pagination item. |
page | number | - | The current page number (controlled). Use this for controlled pagination state. |
renderItem | (item: PaginationItemProps) => ReactNode | - | Custom render function for pagination items. Allows complete customization of how each pagination item is rendered. |
showFirstButton | boolean | false | If true, shows the "first page" button. Allows users to jump directly to the first page. |
showLastButton | boolean | false | If true, shows the "last page" button. Allows users to jump directly to the last page. |
siblingCount | number | 1 | Number of always visible pages before and after the current page. |
size | "sm" | "md" | "lg" | "md" | The size of the pagination buttons. Controls the overall size of the pagination component. |
variant | "text" | "outlined" | "outlined" | The visual variant of the pagination buttons. Controls the appearance style of the pagination items. |
| Prop | Type | Default | Description |
|---|---|---|---|
color | "primary" | "secondary" | "neutral" | "neutral" | The color theme of the pagination item. Controls the color scheme used for styling. It will override the color set in Pagination. |
disabled | boolean | false | If true, the item is disabled and cannot be interacted with. Typically used for navigation items when at the first/last page. |
page | number | - | The page number this item represents. For navigation items (first, last, previous, next), this is the target page number. |
selected | boolean | false | If true, this item represents the currently selected page. Affects the visual styling to indicate the active state. |
size | "sm" | "md" | "lg" | "md" | The size of the pagination item. Controls the dimensions of the item. It will override the size set in Pagination. |
type | "next" | "previous" | "page" | "first" | "last" | "start-ellipsis" | "end-ellipsis" | "page" | The type of pagination item. Determines the visual representation and behavior of the item. |
variant | "text" | "outlined" | "text" | The visual variant of the pagination item. Controls the appearance style (outlined or text). It will override the variant set in Pagination. |