Pagination

Important notice: The pagination component will not remove pages from the index if it overflows. Please trtuncate your array before sending it into list parameter.

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.

Parameters (Blade)

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

Parameters (CSS)

Key Default value Type Available 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.