Pagination

Help users navigate forwards and backwards through a series of pages. For example, search results or guidance that's divided into multiple pages.

With border

<script setup lang="ts">
import { VPagination } from '@vonage/vivid-api-vue';
</script>

<template>
  <VPagination class="outlined" :total="10" shape="pill" />
</template>

<style>
.outlined {
  border: 1px solid var(--vvd-color-neutral-400);
  padding: 6px;
  border-radius: 24px;
  display: inline-block;
}
</style>

<vwc-pagination class="outlined" total="10" shape="pill"></vwc-pagination>

<style>
  .outlined {
    border: 1px solid var(--vvd-color-neutral-400);
    padding: 6px;
    border-radius: 24px;
    display: inline-block;
  }
</style>