# Pagination

The v-pagination component is used to separate long sets of data so that it is easier for a user to consume information. Depending on the length provided, the pagination component will automatically scale. To maintain the current page, simply supply a v-model attribute.

# Usage

Pagination by default displays the number of pages based on the set length prop, with prev and next buttons surrounding to help you navigate.


# Examples

# Props

# Rounded

The rounded prop allows you to render pagination buttons with alternative styles.

# Disabled

Pagination items can be manually deactivated using the disabled prop.

# Icons

Previous and next page icons can be customized with the prev-icon and next-icon props.

# Length

Using the length prop you can set the length of v-pagination, if the number of page buttons exceeds the parent container, it will truncate the list.

# Total visible

You can also manually set the maximum number of visible page buttons with the total-visible prop.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.