Pagination

MYDS-compliant pagination component for seamless transition starting point from HTML/CSS to React

Overview

The Pagination component helps users navigate large sets of content by dividing results into discrete pages. It provides clear navigation context, reduces cognitive load, and ensures consistent interaction across MYDS applications.

This component is implemented using HTML, CSS, and JavaScript, suitable for projects not using React.

1. Setup

Required Stylesheets

Load the stylesheets in the following order to ensure correct styling and theme overrides:

<!-- refer to PaginationCSS -->
<link rel="stylesheet" href="pagination.css" />
 
<!-- refer to PaginationDarkCSS -->
<link rel="stylesheet" href="pagination-dark.css" />

Font Requirement

The Inter font is part of the MYDS design guidelines. Add it inside your <head>:

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Your <head> should look similar to:

<head>
  <!-- Inter Font -->
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />
 
  <!-- Design System Stylesheet -->
  <link rel="stylesheet" href="pagination.css" />
  <link rel="stylesheet" href="pagination-dark.css" />
</head>

2. Usage

Use pagination when:

A dataset is too large to display at once
Content is fetched page by page from an API
Users need to understand their position within a result set

Avoid pagination when:

The total number of items is small
Infinite scrolling or progressive loading is more appropriate

3. Variants

The Pagination component supports three variants, each designed for different levels of context and screen density.

Simple

Provides only Previous and Next controls. Suitable for mobile views or minimal layouts.

Default

Displays numbered pages with ellipsis handling for large datasets.

Full

Adds contextual information such as current page and total pages. Best for desktop layouts and data-heavy views.

4. JavaScript Integration

Pagination logic is handled via JavaScript and includes:

Dynamic page number rendering
Ellipsis handling for large page counts
Disabled states for boundary pages
Shared state across all pagination variants

Using API-driven pagination

In real applications, pagination state is usually controlled by API responses rather than hardcoded values.

Typical API values:

currentPage : current page number (1-based)
pageSize : number of items per page
totalPages : total number of pages

5. Anatomy

Selector	Purpose
`.pagination-myds`	Base pagination layout
`.button-myds`	Button appearance and interaction
`.number`	Page number button
`.selected`	Active page indicator
`.current-page-number`	Page context text (Full variant)
`:hover`	Hover interactions
`:focus`	Focus ring for accessibility
`:disabled`	Disabled appearance and cursor style

6. Customization

You may override pagination styles to suit specific layouts or branding needs. Example:

.pagination-myds .selected {
  background-color: #e5edff;
}

7. Accessibility

Visible focus indicators for keyboard navigation
Disabled state uses the native disabled attribute

Pagination

On this page