Pagination

The Pagination component is a versatile navigation component that provides page navigation functionality. It supports both simple (Previous/Next) and full pagination with page numbers, various styling variants, positioning options, and additional features like page size selection and go-to-page functionality.

Overview

The Pagination component is designed to provide flexible page navigation with:

Simple and full pagination modes
Multiple styling variants (default, bordered, rounded, outlined)
Positioning options (left, center, right)
Spacing variants (compact and spaced)
Page information display
Page size selection
Go-to-page functionality
Responsive design with proper accessibility

Basic Usage

import { Pagination } from '@/components/molecules'
import { useState } from 'react'

function MyComponent() {
  const [currentPage, setCurrentPage] = useState(1)
  const totalPages = 20

  const handlePageChange = (page) => {
    setCurrentPage(page)
    console.log('Page changed to:', page)
  }

  return (
    <Pagination 
      currentPage={currentPage} 
      totalPages={totalPages} 
      onPageChange={handlePageChange} 
    />
  )
}

Props

Prop	Type	Default	Description
`currentPage`	`number`	`1`	Current active page number
`totalPages`	`number`	`1`	Total number of pages
`onPageChange`	`function`	-	Callback when page changes
`className`	`string`	`''`	Additional CSS classes
`variant`	`string`	`'default'`	Styling variant ('default', 'bordered', 'border-group', 'rounded-lg', 'rounded-full', 'outlined')
`showIcons`	`boolean`	`true`	Whether to show navigation icons
`position`	`string`	`'left'`	Position alignment ('left', 'center', 'right')
`simple`	`boolean`	`false`	Simple mode (Previous/Next only)
`compact`	`boolean`	`false`	Compact spacing between items
`showPageInfo`	`boolean`	`false`	Show "Showing X to Y of Z results"
`showPageSize`	`boolean`	`false`	Show page size dropdown
`showGoToPage`	`boolean`	`false`	Show "Go to page" input
`pageSize`	`number`	`10`	Current page size
`totalItems`	`number`	`0`	Total number of items
`onPageSizeChange`	`function`	-	Callback when page size changes

Basic Pagination

Default Pagination

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Basic Pagination</h4>
    <span className='text-sm text-gray-500'>Default style</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />
</Card>

Simple Pagination (Previous/Next Only)

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Simple Pagination</h4>
    <span className='text-sm text-gray-500'>Previous/Next only</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} simple={true} />
</Card>

Spacing Variants

Spaced Pagination (Default)

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Spaced Pagination</h4>
    <span className='text-sm text-gray-500'>With gaps between items</span>
  </div>
  <div className='p-4 bg-gray-50 dark:bg-gray-800 rounded-lg'>
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} compact={false} />
  </div>
</Card>

Compact Pagination

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Compact Pagination</h4>
    <span className='text-sm text-gray-500'>Tight spacing</span>
  </div>
  <div className='p-4 bg-gray-50 dark:bg-gray-800 rounded-lg'>
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} compact={true} />
  </div>
</Card>

Position Variants

Left Aligned (Default)

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Left Aligned</h4>
    <span className='text-sm text-gray-500'>Default position</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} position='left' />
</Card>

Center Aligned

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Center Aligned</h4>
    <span className='text-sm text-gray-500'>Centered position</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} position='center' />
</Card>

Right Aligned

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Right Aligned</h4>
    <span className='text-sm text-gray-500'>Right position</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} position='right' />
</Card>

Style Variants

Rounded Style

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Rounded Style</h4>
    <span className='text-sm text-gray-500'>Rounded corners</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='rounded-lg' />
</Card>

Full Rounded

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Full Rounded</h4>
    <span className='text-sm text-gray-500'>Circular buttons</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='rounded-full' />
</Card>

Bordered Style

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Bordered Style</h4>
    <span className='text-sm text-gray-500'>With borders</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='bordered' />
</Card>

Outlined Style

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Outlined Style</h4>
    <span className='text-sm text-gray-500'>Outlined buttons</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='outlined' />
</Card>

Mixed Variants

Compact Rounded

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Compact Rounded</h4>
    <span className='text-sm text-gray-500'>Tight spacing with rounded corners</span>
  </div>
  <div className='p-4 bg-gray-50 dark:bg-gray-800 rounded-lg'>
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='rounded-lg' compact={true} />
  </div>
</Card>

Spaced Outlined

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Spaced Outlined</h4>
    <span className='text-sm text-gray-500'>Normal spacing with outlined style</span>
  </div>
  <div className='p-4 bg-gray-50 dark:bg-gray-800 rounded-lg'>
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='outlined' compact={false} />
  </div>
</Card>

Advanced Features

With Page Info

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>With Page Info</h4>
    <span className='text-sm text-gray-500'>Showing results info</span>
  </div>
  <Pagination 
    currentPage={currentPage} 
    totalPages={totalPages} 
    onPageChange={handlePageChange} 
    showPageInfo={true} 
    totalItems={totalItems} 
    pageSize={pageSize} 
  />
</Card>

With Page Size

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>With Page Size</h4>
    <span className='text-sm text-gray-500'>Entries per page</span>
  </div>
  <Pagination 
    currentPage={currentPage} 
    totalPages={totalPages} 
    onPageChange={handlePageChange} 
    showPageSize={true} 
    pageSize={pageSize} 
    onPageSizeChange={handlePageSizeChange} 
  />
</Card>

Complete Pagination

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Complete Pagination</h4>
    <span className='text-sm text-gray-500'>All features combined</span>
  </div>
  <Pagination
    currentPage={currentPage}
    totalPages={totalPages}
    onPageChange={handlePageChange}
    showPageInfo={true}
    showPageSize={true}
    showGoToPage={true}
    totalItems={totalItems}
    pageSize={pageSize}
    onPageSizeChange={handlePageSizeChange}
    variant='rounded-lg'
    position='center'
  />
</Card>

Simple Variants

Simple - Default

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Simple - Default</h4>
    <span className='text-sm text-gray-500'>Basic prev/next</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} simple={true} />
</Card>

Simple - Rounded

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Simple - Rounded</h4>
    <span className='text-sm text-gray-500'>Rounded prev/next</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} simple={true} variant='rounded-lg' />
</Card>

Simple - Outlined

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Simple - Outlined</h4>
    <span className='text-sm text-gray-500'>Outlined prev/next</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} simple={true} variant='outlined' />
</Card>

State Management

Using useState

import { useState } from 'react'

const PaginationExample = () => {
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const totalPages = 20
  const totalItems = 195

  const handlePageChange = (page) => {
    setCurrentPage(page)
    console.log('Page changed to:', page)
  }

  const handlePageSizeChange = (newPageSize) => {
    setPageSize(newPageSize)
    setCurrentPage(1) // Reset to first page when changing page size
    console.log('Page size changed to:', newPageSize)
  }

  return (
    <Pagination
      currentPage={currentPage}
      totalPages={totalPages}
      onPageChange={handlePageChange}
      showPageInfo={true}
      showPageSize={true}
      showGoToPage={true}
      totalItems={totalItems}
      pageSize={pageSize}
      onPageSizeChange={handlePageSizeChange}
    />
  )
}

Examples

Basic Pagination

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Basic Pagination</h4>
    <span className='text-sm text-gray-500'>Default style</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />
</Card>

Simple Pagination

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Simple Pagination</h4>
    <span className='text-sm text-gray-500'>Previous/Next only</span>
  </div>
  <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} simple={true} />
</Card>

Spaced Pagination

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Spaced Pagination</h4>
    <span className='text-sm text-gray-500'>With gaps between items</span>
  </div>
  <div className='p-4 bg-gray-50 dark:bg-gray-800 rounded-lg'>
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} compact={false} />
  </div>
</Card>

Compact Pagination

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Compact Pagination</h4>
    <span className='text-sm text-gray-500'>Tight spacing</span>
  </div>
  <div className='p-4 bg-gray-50 dark:bg-gray-800 rounded-lg'>
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} compact={true} />
  </div>
</Card>

Position Variants

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Modal Position</h4>
    <span className='text-sm text-gray-500'>Different alignments</span>
  </div>
  <div className='space-y-4'>
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} position='left' />
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} position='center' />
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} position='right' />
  </div>
</Card>

Style Variants

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Style Variants</h4>
    <span className='text-sm text-gray-500'>Different visual styles</span>
  </div>
  <div className='space-y-4'>
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='rounded-lg' />
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='rounded-full' />
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='bordered' />
    <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} variant='outlined' />
  </div>
</Card>

Advanced Features

<Card>
  <div className='flex items-center justify-between mb-4'>
    <h4 className='text-lg font-semibold text-gray-900 dark:text-white'>Advanced Features</h4>
    <span className='text-sm text-gray-500'>Page info, size, and go-to</span>
  </div>
  <Pagination
    currentPage={currentPage}
    totalPages={totalPages}
    onPageChange={handlePageChange}
    showPageInfo={true}
    showPageSize={true}
    showGoToPage={true}
    totalItems={totalItems}
    pageSize={pageSize}
    onPageSizeChange={handlePageSizeChange}
  />
</Card>

CSS Classes Reference

Pagination Container

.pagination - Base pagination container
.pagination-wrapper - Wrapper for pagination with additional controls
.spaced-pagination - Pagination with gaps between items
.compact-pagination - Pagination with tight spacing

Pagination Items

.pagination-item - Individual pagination button/item
.active - Active page styling
.disabled - Disabled state styling

Variants

.pagination-default - Default styling
.pagination-bordered - Bordered container style
.pagination-border-group - Grouped border style
.pagination-rounded-lg - Rounded corners style
.pagination-rounded-full - Full rounded style
.pagination-outlined - Outlined button style

Position Classes

.justify-start - Left alignment
.justify-center - Center alignment
.justify-end - Right alignment

Styling

The Pagination component uses Tailwind CSS classes and includes:

Flexbox Layout: Flexible positioning and alignment
Responsive Design: Works on all screen sizes
Dark Mode Support: Automatic dark mode variants
Hover Effects: Interactive hover states
Focus States: Proper focus indicators
Transitions: Smooth state transitions
Accessibility: Keyboard navigation and ARIA support

Accessibility

The Pagination component includes accessibility features:

Keyboard Navigation: Tab and arrow key support
Screen Reader Support: Proper ARIA labels and roles
Focus Management: Visible focus indicators
Semantic HTML: Proper button and navigation structure
Disabled States: Proper disabled state handling

Best Practices

Always provide onPageChange handler for proper functionality
Use appropriate page sizes for your content
Consider mobile users with responsive design
Include page information for better UX
Use simple pagination for large page counts
Test keyboard navigation for accessibility compliance

Common Use Cases

Data tables: Navigation through large datasets
Search results: Browsing through search results
Content lists: Navigating through content pages
E-commerce: Product listing pagination
Blog posts: Article listing navigation

PaginationItem - Individual pagination button component
NavIcon - Used for Previous/Next icons
Card - Often used as a container for pagination examples
Button - For custom pagination controls

Overview​

Basic Usage​

Props​

Basic Pagination​

Default Pagination​

Simple Pagination (Previous/Next Only)​

Spacing Variants​

Spaced Pagination (Default)​

Compact Pagination​

Position Variants​

Left Aligned (Default)​

Center Aligned​

Right Aligned​

Style Variants​

Rounded Style​

Full Rounded​

Bordered Style​

Outlined Style​

Mixed Variants​

Compact Rounded​

Spaced Outlined​

Advanced Features​

With Page Info​

With Page Size​

Complete Pagination​

Simple Variants​

Simple - Default​

Simple - Rounded​

Simple - Outlined​

State Management​

Using useState​

Examples​

Basic Pagination​

Simple Pagination​

Spaced Pagination​

Compact Pagination​

Position Variants​

Style Variants​

Advanced Features​

CSS Classes Reference​

Pagination Container​

Pagination Items​

Variants​

Position Classes​

Styling​

Accessibility​

Best Practices​

Common Use Cases​

Related Components​

Overview

Basic Usage

Props

Basic Pagination

Default Pagination

Simple Pagination (Previous/Next Only)

Spacing Variants

Spaced Pagination (Default)

Compact Pagination

Position Variants

Left Aligned (Default)

Center Aligned

Right Aligned

Style Variants

Rounded Style

Full Rounded

Bordered Style

Outlined Style

Mixed Variants

Compact Rounded

Spaced Outlined

Advanced Features

With Page Info

With Page Size

Complete Pagination

Simple Variants

Simple - Default

Simple - Rounded

Simple - Outlined

State Management

Using useState

Examples

Basic Pagination

Simple Pagination

Spaced Pagination

Compact Pagination

Position Variants

Style Variants

Advanced Features

CSS Classes Reference

Pagination Container

Pagination Items

Variants

Position Classes

Styling

Accessibility

Best Practices

Common Use Cases

Related Components