XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Pagination

Previous: OrbNext: Popover

Links for moving between pages of results.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  Pagination,3  PaginationContent,4  PaginationEllipsis,5  PaginationFirst,6  PaginationInput,7  PaginationItem,8  PaginationLast,9  PaginationLink,10  PaginationNext,11  PaginationPrevious12} from "xiod-ui/pagination";

Anatomy

1<Pagination>2  <PaginationContent>3    <PaginationItem>4      <PaginationPrevious />5    </PaginationItem>6  </PaginationContent>7</Pagination>

API Reference

Detailed documentation of properties and options.

Pagination

Accepts render, plus every native <nav> attribute.

PropTypeDefaultDescription
labels
Partial<PaginationLabels>
–

Replaces the built-in text of this pagination and its parts. Takes precedence over LabelsProvider.

PaginationContent

Accepts render,

OrbPopover
plus every native <ul> attribute.

PaginationEllipsis

Accepts render, plus every native <span> attribute.

PropTypeDefaultDescription
icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

PaginationFirst

Accepts render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
disabled
boolean
–

Whether the link is unavailable, such as Previous on the first page. It can't be clicked or focused and is announced as disabled.

icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

isActive
boolean
–

Whether the link is the current page. Highlights it and marks it with aria-current="page".

size
"lg"|"sm"|"default"|"xl"|"xs"|"icon"|"icon-lg"|"icon-sm"|"icon-xl"|"icon-xs"
–

The size of the component.

PaginationInput

Accepts every native <input> attribute.

PropTypeDefaultDescription
onChange
((page: number) => void)
–

Called with the page number when the user presses Enter or leaves the input. The number is clamped between 1 and totalPages.

totalPages
number
–

The number of pages. Entries above it are clamped to it.

value
number
–

The current page number.

PaginationItem

Accepts render, plus every native <li> attribute.

PaginationLast

Accepts render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
disabled
boolean
–

Whether the link is unavailable, such as Previous on the first page. It can't be clicked or focused and is announced as disabled.

icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

isActive
boolean
–

Whether the link is the current page. Highlights it and marks it with aria-current="page".

size
"lg"|"sm"|"default"|"xl"|"xs"|"icon"|"icon-lg"|"icon-sm"|"icon-xl"|"icon-xs"
–

The size of the component.

PaginationLink

Accepts render, plus every native <a> attribute.

PropTypeDefaultDescription
disabled
boolean
–

Whether the link is unavailable, such as Previous on the first page. It can't be clicked or focused and is announced as disabled.

isActive
boolean
–

Whether the link is the current page. Highlights it and marks it with aria-current="page".

size
"lg"|"sm"|"default"|"xl"|"xs"|"icon"|"icon-lg"|"icon-sm"|"icon-xl"|"icon-xs"
icon

The size of the component.

PaginationNext

Accepts render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
disabled
boolean
–

Whether the link is unavailable, such as Previous on the first page. It can't be clicked or focused and is announced as disabled.

icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

isActive
boolean
–

Whether the link is the current page. Highlights it and marks it with aria-current="page".

size
"lg"|"sm"|"default"|"xl"|"xs"|"icon"|"icon-lg"|"icon-sm"|"icon-xl"|"icon-xs"
–

The size of the component.

PaginationPrevious

Accepts render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
disabled
boolean
–

Whether the link is unavailable, such as Previous on the first page. It can't be clicked or focused and is announced as disabled.

icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

isActive
boolean
–

Whether the link is the current page. Highlights it and marks it with aria-current="page".

size
"lg"|"sm"|"default"|"xl"|"xs"|"icon"|"icon-lg"|"icon-sm"|"icon-xl"|"icon-xs"
–

The size of the component.