@neynar/ui/llm-docs/pagination-link.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# PaginationLink

**Type**: component

Clickable link for individual page numbers Interactive link component that navigates to specific pages within paginated content. Uses buttonVariants from the Button component to provide consistent styling - applies "outline" variant when active and "ghost" variant when inactive. Features automatic active state styling and comprehensive accessibility attributes. The component automatically inherits focus management, hover states, and proper spacing from the Button component's CVA configuration while maintaining semantic link behavior for proper navigation and SEO.

## JSX Usage

```jsx
import { PaginationLink } from '@neynar/ui';

<PaginationLink
  isActive={true}
  size={value}
  href="value"
  className="value"
  onClick={handleClick}
  "aria-label"="value"
  "aria-current"={value}
  "aria-describedby"="value"
  "aria-disabled"={true}
  tabIndex={0}
  id="value"
  title="value"
  target={value}
  rel="value"
>
  {/* Your content here */}
</PaginationLink>
```

## Component Props

### isActive
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### size
- **Type**: `"default" | "sm" | "lg" | "icon"`
- **Required**: No
- **Description**: No description available

### href
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### onClick
- **Type**: `React.MouseEventHandler<HTMLAnchorElement>`
- **Required**: No
- **Description**: No description available

### "aria-label"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-current"
- **Type**: `"page" | "step" | "location" | "date" | "time" | boolean`
- **Required**: No
- **Description**: No description available

### "aria-describedby"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-disabled"
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### tabIndex
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### id
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### title
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### target
- **Type**: `"_self" | "_blank" | "_parent" | "_top"`
- **Required**: No
- **Description**: No description available

### rel
- **Type**: `string`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic page links with different states
<PaginationLink href="/products?page=1">1</PaginationLink>
<PaginationLink href="/products?page=2" isActive>2</PaginationLink>
<PaginationLink href="/products?page=3">3</PaginationLink>
```
### Example 2
```tsx
// Different sizes using Button size variants
<PaginationLink href="/page/1" size="sm">1</PaginationLink>
<PaginationLink href="/page/2" size="default">2</PaginationLink>
<PaginationLink href="/page/3" size="lg">3</PaginationLink>
```
### Example 3
```tsx
// With onClick handlers for client-side pagination
<PaginationLink
  href="#"
  onClick={(e) => {
    e.preventDefault();
    onPageChange(1);
  }}
  aria-label="Go to page 1"
>
  1
</PaginationLink>
```
### Example 4
```tsx
// Disabled state for out-of-bounds pages
<PaginationLink
  href="#"
  className="pointer-events-none opacity-50"
  aria-disabled="true"
  tabIndex={-1}
>
  5
</PaginationLink>
```