Pagination - EnterUI

LayoutUpdated May 3, 2026

#Default usage

#Usage

import {
  Pagination,
  PaginationItem,
  PaginationLink,
  PaginationList,
  PaginationNext,
  PaginationPrevious,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <Pagination>
      <PaginationList>
        <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="#" active>2</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="#" /></PaginationItem>
      </PaginationList>
    </Pagination>
  );
}

#Accessibility

Pagination renders a nav landmark. Active links set aria-current="page", and previous/next links include accessible labels.

#API

PaginationLink supports active and disabled.
PaginationPrevious and PaginationNext are convenience links.
All link primitives extend anchor props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page