Pagination

Pagination is a compound component for paged navigation.

Overview

Pagination styling is mostly delegated to the composed Button, IconButton, and Text primitives. The pagination-specific layer mainly controls list layout and a few page-item shape adjustments.

Public CSS Variables

There are no large dedicated --pagination-* public variables in the current implementation.

The component primarily relies on:

Variable	Value	Affects
gap between itemsroot list		No visible change in this state
square aspect-ratio sizingpage items / ellipsis		No visible change in this state
inline text paddingpagination text		No visible change in this state
primary text tonepagination text		No visible change in this state
secondary text tonepagination text		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root sets horizontal list layout and spacing.

`PaginationItem`

Adds square aspect ratio by mapping inline padding to block padding.

`PaginationEllipsis`

Uses button styling but removes interactive-looking background changes.

`PaginationText`

Adds side padding and variant-based text color.

State And Variant Interaction

size and variant mostly flow from pagination context into Button, IconButton, and Text
current page state changes button appearance to fill
ellipsis stays visually passive

Examples

Secondary pagination text

LTRRTL

secondary-pagination-text.tsx · 32 lines

import { ChevronLeft, ChevronRight } from '@vega-ui/icons';
import {
  Icon,
  Pagination,
  PaginationListItem,
  PaginationText,
  PaginationTriggerIconButton,
} from '@vega-ui/react';
import { useState } from 'react';

export default function SecondaryPaginationText() {
  const total = 20;

Do Not Override

styling ellipsis like an interactive page item
making page items non-square without product intent