Skip to main content
Design system

Pagination Dots

Pagination Dots indicate progress through a range of elements.

Bundle size: 2.33 kB
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { PaginationDots } from "@washingtonpost/wpds-ui-kit"
|Copy
Storybook:  View on Storybook
Source:  View on Github

Anatomy

Note: Image is not to scale

  1. Container of dots

Options

Index

Index determines the position of the currently active dot.

Amount

This is the total amount of dots in the range.

Orientation

If the dots are oriented left -> right or top -> bottom. It defaults to a horizontal orientation.


Guidance

Only controllable externally

An external component must be implemented to dynamically control the index and/or amount of dots. A typical use case would be a carousel of pictures.


Accessibility

The root node has the role progressbar. The label prop is required, and the unitName prop is optional.

When unitName is specified, the aria-valuetext will work with aria-valuemax and aria-valuenow to read the pagination progress. For example, if unitName="Page", the aria-valuetext will read "Page aria-valuenow of aria-valuemax".


API Reference

Edit this page on GitHub.