Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Pagination: Overview

A web component that handles pagination.

export const main = () => html` <lion-pagination count="20" current="10"></lion-pagination> `;


  • You can pass the total number of pages in the count parameter, and the current page in the current parameter. If current is not defined it will default to the value 1.
  • On a click or parameter change of current it will fire an event back called current-changed.


npm i --save @lion/ui
import { LionPagination } from '@lion/ui/pagination.js';
// or
import '@lion/ui/define/lion-pagination.js';