Vue Pagination - Soft UI

Help the user select a specific page from a range of pages with our Pagination component based on Vue.js. See below the examples.


Default Pagination

Use this example to create a simple and versatile pagination list.

Props Information

NameTypeDefaultDescription
slotnodeThe SoftPagination has a default slot that receives SoftPaginationItem as node.
color'primary''secondary''info''success''warning''danger''light''dark'successUsed to set the background of the SoftPagination.
size'sm''md''lg'mdUsed to set the size of the SoftPagination.
labelstringUsed to set label of the SoftPaginationItem.
activeboolfalseUsed to mark the SoftPaginationItem as active.
disabledboolfalseUsed to mark the SoftPaginationItem as disabled.
prevboolfalseUsed to add left-arrow to the SoftPaginationItem. Avoid using it with the label.
nextboolfalseUsed to add right-arrow to the SoftPaginationItem. Avoid using it with the label.

Pagination Sizes

Use this example to create a pagination component on different sizes and colors.