Pagination

The Pagination component provides a reusable pattern for pagination in the interface.

Pagination

Basic pagination with 15 pages, demonstrating overflow ellipsis indicators when the list exceeds five visible items.

Using JS

With just a few added attributes you can have pagination made for you, including keepDOM, pagesToShow, and randomizeOrder options.

Simple pagination

Showing all pages in the pagination at the same time.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Pagination with pagesToShow attribute.

Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Pagination with pagesToShow attribute.

Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).

Item 8
Item 9
Item 3
Item 4
Item 5
Item 1
Item 2
Item 6
Item 7

Small list

Pagination with four pages and a static active page — no overflow or ellipsis indicators are shown when the total fits within the visible window.

Button size: medium

Pagination rendered with medium-sized buttons using buttonSize 'md', producing wider page-number buttons than the default small size.

Button size: large

Pagination rendered with large-sized buttons using buttonSize 'lg', producing the widest page-number buttons in the available size scale.

Button style: outlined

Pagination using outlined button style, giving page buttons a bordered appearance instead of the default filled background.

Button style: basic

Pagination using basic button style, rendering page buttons without fill or border for a minimal, text-only appearance.

API

Parameter Default Description
list
[] Array with pages
current
1 current page as index number
currentClass
--is-active The current classname
componentElement
nav The tag for the component
listElement
ul List element tag
listItem
li List item tag
linkPrefix
?pagination= Pagination uses a link prefix on prev next buttons before the numeric index, add it here.
anchorTag
Adds the ability to add an anchor tag in the end of every link.
previousDisabled
false -
nextDisabled
false -
useJS
false If the item should use default JS to supply pagination
randomizeOrder
false When useJS is true, this option randomize the order of the items.
perPage
10 How many items per page
maxPages
false Maximum amount of pages
buttonStyle
filled The style of button to display
buttonSize
sm Size of the buttons
pagesToShow
false Amount of pages that is shown to the user at one time.
keepDOM
false -

CSS API

Variable Default Type Values Description
--c-pagination--base
var(--base) range - Main unit that drives radius and spacing scales.
--c-pagination--space
var(--space) range - Base spacing unit. Used for padding and margin inside components.

Similar components

Option Icon Section Icon