WPDS Documentation & Resources

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

Container of dots

Options

Index

Index determines the position of the currently active dot.


Open in Playroom

Amount

This is the total amount of dots in the range.


Open in Playroom

Orientation

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


Open in Playroom

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.


Open in Playroom

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".