Pagination

• 󰯣
• 1
• 2
• 3
• 4
• 󰽵
• 12
• 󰯱

Contract

Overview

Machine-readable contract from Component Spec.

component: paginationexport: Paginationversion: 1attributes: data-refineui=pagination

Anatomy

Part	data-refineui
root	pagination

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Keyboard

Key	Action	Native
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis
} from "@refineui/react";

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">10</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

API Reference

Pagination

Root container (<nav> element).

PaginationContent

List of pagination items.

PaginationItem

List item wrapper.

PaginationLink

Prop	Default	Type	Description
isActive	false	boolean	Marks the current page.

PaginationPrevious

Previous page button.

PaginationNext

Next page button.

PaginationEllipsis

Indicator for skipped pages.