The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

Pagination

Source

A component for navigating through paginated content with customizable page ranges and navigation controls.

Usage

Import the Pagination component from @bun-ui/react and use it in your project:

import { Pagination } from "@bun-ui/react"
<Pagination count={10} />

Examples

Basic Usage

A simple pagination component with default settings:

Controlled

Manage the page state externally:

Current page: 1

With First and Last Buttons

Add first and last page navigation buttons:

Variants

The Pagination component supports two variants:

Colors

Customize the color scheme of the pagination:

Sizes

The Pagination component supports three sizes:

Disabled State

Disable the entire pagination component:

Custom Render Item

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:

Props

Pagination

PropTypeDefaultDescription
boundaryCount
number1

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
number1

The total number of pages.

defaultPage
number1

The default page number when the component is uncontrolled.

disabled
booleandisabled

If true, disables all pagination buttons. Useful when pagination should be temporarily disabled.

hideNextButton
booleanfalse

If true, hides the "next page" button. Useful when you want to control navigation programmatically.

hidePrevButton
booleanfalse

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
booleanfalse

If true, shows the "first page" button. Allows users to jump directly to the first page.

showLastButton
booleanfalse

If true, shows the "last page" button. Allows users to jump directly to the last page.

siblingCount
number1

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.

PaginationItem

PropTypeDefaultDescription
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
booleanfalse

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
booleanfalse

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.