##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Pagination

Pagination is an essential UI component that helps users navigate through large sets of data or content spread across multiple pages. Our pagination components are built with accessibility in mind and offer various styles and configurations to suit different design needs.

### Overview

The basic pagination component provides intuitive navigation through numbered pages with Previous/Next options. Each navigation item is structured with semantic HTML using `nav` and `ul` elements, where individual items use the `page-item` class and links use `page-link`.

Basic Pagination
Loading...
Basic Pagination
Loading...

### Icon Navigation

Enhance visual navigation with Remixicon icons. This example demonstrates icon-only navigation buttons with proper accessibility attributes. The `aria-label` provides context for screen readers, while `aria-hidden="true"` prevents icons from being announced.

Icon Navigation
Loading...
Icon Navigation
Loading...

### Interactive States

Pagination components support different states to indicate current position and availability. The `disabled` class prevents interaction with unavailable pages, while `active` highlights the current page. Use `aria-current="page"` to indicate the active page for screen readers.

Interactive States
Loading...
Interactive States
Loading...

### Size Variations

Our pagination component follows a consistent sizing system with five size variants, each optimized for different interface contexts. The sizing system uses proportionally scaled font sizes that maintain optimal readability at each height. All sizes follow the same design system as buttons, form controls, and other interactive elements for visual consistency.

##### Sizing Guidelines

- Extra Large (56px) - Perfect for hero sections, landing pages, and primary call-to-actions
- Large (46px) - Ideal for important navigation, primary actions, and prominent interfaces
- Default (38px) - Standard size for most pagination needs, optimal for general use
- Small (30px) - Great for dense layouts, sidebar navigation, and secondary actions
- Extra Small (24px) - Perfect for compact tables, data grids, and space-constrained areas

All Pagination Sizes
Loading...
All Pagination Sizes
Loading...

### Alignment Options

Control pagination positioning with Bootstrap's flexbox utilities. Use `justify-content-center` for centered alignment or `justify-content-end` for right alignment. The default alignment is left (start).

Centered Pagination
Loading...
Centered Pagination
Loading...
Right-Aligned Pagination
Loading...
Right-Aligned Pagination
Loading...

### Rounded Style

For a modern touch, use the `pagination-rounded` class to create circular pagination buttons. This style works particularly well with icon-only navigation and minimal designs.

Rounded Pagination
Loading...
Rounded Pagination
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates