Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

WARNING: This component is in
Draft
status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

Pagination

✨ Features

  • Pagination ranges
  • Custom Arrows
  • Custom Button Labels
  • Fully Customizable

Hero Example

Styling

Custom Button Labels

Custom Arrows

Hide Next/Prev Buttons

Disabled

API

The Pagination component API provides a set of properties that allow you to customize the behavior and appearance of the pagination.

Here are the notable properties for this component:

PropTypeDescription
selectedPage
number

Current Page Index (start from 1)

totalPages
number

The total of available pages

onPageChange$
function

Emitted when a button is clicked

siblingCount
number

set sibling items close to the selected value

hidePrevButton
boolean

hide the previous button

hideNextButton
boolean

hide the next button

disabled
boolean

disable mouse events

customArrowTexts
ArrowLabels

customize the PREVIOUS and NEXT button labels

gap
string

set the gap between items (i.e. '10px', '1rem', ...)

class
string

custom class for pagination wrapper

defaultClass
string

custom class for each pagination item

selectedClass
string

custom class for the selected item

dividerClass
string

custom class for the divider item

prevButtonClass
string

custom class for the Next button

nextButtonClass
string

custom class for the Next button