Pagination

Page controls for lists and tables with numbered pages or simple prev/next.

Introduction

Pagination provides previous/next controls with labels and page numbers for lists and tables. Use numbered mode when you know the total page count, or mode="simple" for cursor-style APIs that only expose next/previous. Previous and Next resolve through the i18n adapter.

When to use: Paged tables, search results, and any list that splits into discrete pages. DataTable renders its own chrome pager when page is set. Prefer Link for a single destination and Tabs for switching peer views on the same level.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Pagination } from "@bridge-ui/vue/Components/Pagination";

import { Pagination } from "@bridge-ui/react/Components/Pagination";

Basic usage

Pass count for the total number of pages. Control the page with page / onChange (React) or v-model (Vue). Pages are 1-based.

Variants

Choose the control style with variant: ghost (default), text, or outlined.

Rounded

rounded shapes ghost and text item corners and the outlined group / edge controls.

Siblings and boundaries

Tune the visible window with siblingCount (pages beside the current page) and boundaryCount (pages always shown at each end). Long ranges insert ellipsis placeholders.

Simple mode

For APIs that do not expose a total page count, set mode="simple" and drive availability with hasNext / hasPrevious plus onNext / onPrevious (React) or @next / @previous (Vue).

Sizes

Change density with size: sm, md (default), and lg.

Accessibility

• The root renders a nav with aria-label="Pagination" by default. Override with your own aria-label when the page has more than one pagination control.
• Page buttons use aria-label="Page N"; the current page also gets aria-current="page".
• Previous and next controls show Previous and Next labels beside the chevrons.
• Ellipsis placeholders are aria-hidden.

Anatomy

<nav aria-label="Pagination"> <!-- root -->
  <ul> <!-- list -->
    <li> <!-- previous -->
      <button> <!-- prev control: chevron + Previous / slots.prev -->
    <li> <!-- page or ellipsis -->
      <button|li> <!-- page item / ellipsis -->
    <li> <!-- next -->
      <button> <!-- next control: Next + chevron / slots.next -->
  </ul>
</nav>

Target parts with classes: root, list, item, prev, next, and ellipsis.

Related components

Breadcrumb, Link, Tabs, Stepper, Table, DataTable

API

Pagination