Design system

Pagination Dots

Pagination Dots indicate progress through a range of elements.

Bundle size: 2.19 kB
Install:
npm install @washingtonpost/wpds-pagination-dots
|Copy
Usage:
import { PaginationDots } from "@washingtonpost/wpds-pagination-dots"
|Copy

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.


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

PropDescriptionTypeDefaultRequired
labelThe input's label text, required for accessibility
string
Pagination Dots False
indexThe 1-indexed position of the currently active dot
number
1 False
amountThe total amount of dots in range
number
----
True
unitNameSpecifies the type of element represented by the dots (e.g., "Page")
string
----False