Morningstar Design System v1.1.0

Variations

Default

Hover

Focus

White Light Dark Black

Copy to Clipboard Press Ctrl + C to copy

<nav class="mds-pagination__wrapper">
    <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">
                <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">
                <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="true"> 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

Copy to Clipboard Press Ctrl + C to copy

<nav class="mds-pagination__wrapper">
    <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="true"> 4 </a>
        </li>
        <li class="mds-pagination__item">
            <a href="#" class="mds-pagination__link mds-pagination__link--disabled" aria-label="Go to Next Page"> 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"> 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

Copy to Clipboard Press Ctrl + C to copy

<nav class="mds-pagination__wrapper">
    <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="true"> 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="true">3</a>.

Code Reference

CSS Class References

Class	Applies to	Outcome
`.mds-pagination`	`<ul>`	Initializes the pagination component. Sets spacing and visual design around border wrapper pill which holds the individual navigation items.
`.mds-pagination__item`	`<li>`	Sets visual design treatment and vertical positioning of items within their parent wrapper.
`.mds-pagination__link`	`<a>`	Handles horizontal positioning of individual link items within the pagination wrapper. Exposes a hook JavaScript will use to handle the interaction and page transition functionality.
`.mds-pagination__icon`	`<svg>`	Targets the icons specifically within the pagination wrapper and fine tunes the positioning of the icon within the item flow.