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 to right or top to 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

PaginationDots

PropDescriptionTypeDefaultRequired
indexThe 1-indexed position of the currently active dot
number
1 False
labelThe input's label text, required for accessibility
string
Pagination Dots False
amountThe total amount of dots in range
number
----
True
unitNameSpecifies the type of element represented by the dots (e.g., "Page")
string
----False
orientationIf the dots are oriented left to right or top to bottom
"horizontal" | "vertical"
horizontal False
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS
----False
Edit this page on GitHub.