Morningstar Design System v1.6.0

Variations

Default

Hover

Focus

White Light Dark Black

<nav class="mds-pagination__wrapper" aria-label="Pagination Navigation">
    <ul class="mds-pagination">
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to First Page" aria-disabled="true" tabindex="-1">
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-double-left--s"> </use>
                </svg>
            </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to Previous Page" aria-disabled="true" tabindex="-1">
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-left--s"> </use>
                </svg>
            </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--selected" aria-label="Current Page, Page 1" aria-current="page"> 1 </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 2">2</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 3">3</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 4">4</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 5">5</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 6">6</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 7">7</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 8">8</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Next Page">
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-right--s"> </use>
                </svg>
            </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Last Page">
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-double-right--s"> </use>
                </svg>
            </a>
        </li>
    </ul>
</nav>

Display a maximum interval of eight pages at a time.
Single caret icon, pagination-left--s / pagination-right--s, increments by one page.
Double caret icon, pagination-left-double--s / pagination-right-double--s, jumps to the first or last page.

With Labels

White Light Dark Black

<nav class="mds-pagination__wrapper" aria-label="Pagination Navigation">
    <ul class="mds-pagination">
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to First Page">
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-double-left--s"> </use>
                </svg> First </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Previous Page">
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-left--s"> </use>
                </svg> Previous </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 1">1</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 2">2</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 3">3</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--selected" aria-label="Current Page, Page 4" aria-current="page"> 4 </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to Next Page" aria-disabled="true" tabindex="-1"> Next
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-right--s"> </use>
                </svg>
            </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to Last Page" aria-disabled="true" tabindex="-1"> Last
                <svg class="mds-icon mds-pagination__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/mds_icons.svg#angle-double-right--s"> </use>
                </svg>
            </a>
        </li>
    </ul>
</nav>

Include labels for clarity when space permits.

No Arrows

White Light Dark Black

<nav class="mds-pagination__wrapper" aria-label="Pagination Navigation">
    <ul class="mds-pagination">
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 1">1</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 2">2</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--selected" aria-label="Current Page, Page 3" aria-current="page"> 3 </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 4">4</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 5">5</a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link" aria-label="Go to Page 6">6</a>
        </li>
    </ul>
</nav>

Only use when number of pages is eight or fewer.

Guidelines

Use When

A table contains more than 30 items.
A page contains enough content to justify breaking it into smaller chunks to improve a user’s experience.

Don't Use When

Using lazy load to load content as the user scrolls.

Behaviors

Disable the first and previous arrow icons (and their labels) when the first page is selected.
Disable the next and last arrow icons (and their labels) when the last page is selected.

Accessibility

Wrap the links with <nav class=”mds-pagination__wrapper” role="navigation" aria-label="Pagination Navigation"> to explicitly communicate that page navigation is present and that it’s intended for pagination.
Add the appropriate ARIA labels to each link, for example, <a href="/page-1" aria-label="Go to Page 1">. This ensures that the screen readers deliver an appropriate message to a user for each link in the pagination component.
For the currently selected page in the range, set the appropriate ARIA attributes on the anchor elements, for example, <a href="/page-3" aria-label="Current Page, Page 3" aria-current="page">3</a>.
Disable the previous and next links when at the beginning or end of a page set. Use the mds-pagination__link--disabled class, combined with aria-disabled="true" and tabindex="-1" to accessibly disable those links.

Code Reference

CSS Class References

Class	Applies to	Outcome
`.mds-pagination__link--selected`	`.mds-pagination__link`	Applies the selected visual style to a pagination link. Use to indicate the current or active page. Combine with `aria-current="page"` to align with accessibility best practices.
`.mds-pagination__link--disabled`	`.mds-pagination__link`	Applies disabled visual style to a pagination link. Combine with `aria-disabled="true"` and `tabindex="-1"` to align with accessibility best practices.