Vue Notus Pagination

Check out our pagination examples, and don’t forget to choose your color. Everything here is styled using Tailwind CSS.


Numbers

Simple

The following example only showcases some numbered pagination.

Active states

You can also modify one of the elements to show your user the active content/page.

Disabled states

You can also provide a disabled state, showing your user that the content/page at hand cannot be viewed, or does not exist.

Active and disabled states

Here is an example with both active and disabled states.

Previous and next icons

Simple

The following example only showcases some numbered pagination.

Active states

You can also modify one of the elements to show your user the active content/page.

Disabled states

You can also provide a disabled state, showing your user that the content/page at hand cannot be viewed, or does not exist.

Active and disabled states

Here is an example with both active and disabled states.

First and last icons

Simple

The following example only showcases some numbered pagination.

Active states

You can also modify one of the elements to show your user the active content/page.

Disabled states

You can also provide a disabled state, showing your user that the content/page at hand cannot be viewed, or does not exist.

Active and disabled states

Here is an example with both active and disabled states.