Pagination

A set of components for building pagination interfaces.

Usage

import { Pagination } from "@rhinolabs/ui"

export default function PaginationDemo() {
  return (
    <Pagination>
      <Pagination.Content>
        <Pagination.Item>
          <Pagination.Previous href="#" />
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#" isActive>1</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">2</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">3</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Next href="#" />
        </Pagination.Item>
      </Pagination.Content>
    </Pagination>
  )
}

Examples

Basic Pagination

A simple pagination with numbered pages.

<Pagination>
  <Pagination.Content>
    <Pagination.Item>
      <Pagination.Previous href="#" />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#" isActive>2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#">3</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Next href="#" />
    </Pagination.Item>
  </Pagination.Content>
</Pagination>

With Ellipsis

Pagination with ellipsis for many pages.

<Pagination>
  <Pagination.Content>
    <Pagination.Item>
      <Pagination.Previous href="#" />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Ellipsis />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#">4</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#" isActive>5</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#">6</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Ellipsis />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#">10</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Next href="#" />
    </Pagination.Item>
  </Pagination.Content>
</Pagination>

Props

PaginationLink

Prop	Type	Default	Description
isActive	boolean	false	Whether the page is currently active
href	string	-	The URL for the page
size	"default" | "icon"	"icon"	The size of the link

All other components accept standard HTML attributes for their respective elements.

Design Considerations

• Show appropriate number of pages
• Indicate current page clearly
• Use consistent spacing
• Consider mobile layouts
• Handle edge cases

Accessibility

• Uses semantic navigation markup
• Provides ARIA labels
• Maintains keyboard navigation
• Indicates current page
• Supports screen readers