Pagination controls provide swift access to all pages, while indicating that more pages exist.
Long lists are broken down into multiple sections by pagination.
1) Disabling the button
You can disable some links if they are not active by adding a
You can align the pagination buttons using the
3) Rounded Pagination buttons
You can use
.is-rounded to make all pagination buttons rounded.
4) Customisable buttons
You can nest icons instead of text in the previous and next buttons by nesting child elements
||Align pagination buttons in the center
||Align pagination buttons to the right
||Rounds the buttons of the pagination links
When to use
Pagination should be used for:
- Displaying large amounts of related content that spans across multiple pages.
- For example, search results or forum posts.
Pagination should not be used for:
- Indicating progress, such as in a transaction.
- Replacing Navigation.
- For main navigation, you are advised to use the
main nav and
side nav components.
Can't find a component?
Let us know what you need and we’ll be happy to look into it