Components

Pagination

Link-based page navigator. Use under tables and long lists — the DataTable's built-in prev/next is enough for small sets, this component takes over when readers need to jump around.

When to usewhen a paged list has more than a handful of pages and readers need to jump non-linearly.

Import

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@ravnhq/efni/pagination"

Standard

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

Compact

Accessibility

Key	Action
`Tab`	Move focus between page links.
`Enter / Space`	Follow the focused link.

Renders as <nav aria-label="pagination">; the active page uses aria-current="page".
Ellipsis is decorative and hidden from assistive tech.

Guidelines

Show first, last, current ± 1, and an ellipsis for the gap — enough anchors to skim.
Keep the total pages visible somewhere (e.g. "of 12") for context.
Use for read-only navigation; for editable page-size or filters, put those elsewhere.

Don't

Don't list every page for large sets — 20+ links is noise.
Don't hide the ellipsis behind a dropdown; readers scan left-to-right.
Don't use Pagination for tabs — use Tabs.

Props

Prop	Type	Default	Description
`PaginationLink.isActive`	`boolean`	—
`PaginationPrevious.text`	`string`	`"Previous"`	Label beside the arrow. Set it to "" for an icon-only control.
`…props`	`React.ComponentProps<"nav">`	—	Everything Pagination passes to the element it renders.
`href (PaginationLink / Previous / Next)`	`string`	—	Standard anchor href. Use a Next Link if you need client-side routing.