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

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

# PaginationNext

**Type**: component

Next page navigation button Navigates to the next page in the pagination sequence. Built on PaginationLink with fixed "default" size and includes a chevron-right icon for visual direction. Features responsive design that shows only an icon on mobile devices and "Next" text with icon on larger screens for optimal user experience. Uses buttonVariants with "ghost" variant by default, inheriting all focus management, hover states, and accessibility features from the Button component.

## JSX Usage

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

<PaginationNext
  href="value"
  className="value"
  onClick={handleClick}
  "aria-label"="value"
  "aria-disabled"={true}
  tabIndex={0}
  id="value"
  title="value"
  target={value}
  rel="value"
/>
```

## Component Props

### href
- **Type**: `string`
- **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-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 next button
<PaginationNext href="/products?page=3" />
```
### Example 2
```tsx
// With disabled state (typically for last page)
<PaginationNext
  href="#"
  className="pointer-events-none opacity-50"
  aria-disabled="true"
  tabIndex={-1}
/>
```
### Example 3
```tsx
// With click handler for client-side navigation
<PaginationNext
  href="#"
  onClick={(e) => {
    e.preventDefault();
    if (currentPage < totalPages) {
      onPageChange(currentPage + 1);
    }
  }}
/>
```
### Example 4
```tsx
// With custom aria-label for internationalization
<PaginationNext
  href="/page/6"
  aria-label="Ir a la página siguiente"
/>
```