Pagination

The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.

Default pagination

Use the following list of pagination items to indicate a series of content for your website.

Pagination with icons

The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.

Previous and next

Use the following markup to show simple previous and next elements.

Previous and next with icons

Use the following code to show simple previous and next elements with icons.

Table data pagination

You can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.

Showing 1 to 10 of 100 Entries

Table data pagination with icons

You can use the following code to show the number of data shown inside a table element and also the previous and next action buttons coupled with icons.