Pagination

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<Pagination> <Pagination.PageButton href="#test" hrefAttrs={{ target: '_blank' }} /> <Pagination.PageButton onPress={() => {}} isActive /> <Pagination.PageButton onPress={() => {}} /> <Pagination.PageButton onPress={() => {}} /> </Pagination>

<Pagination>
  <Pagination.PageButton href="#test" hrefAttrs={{ target: '_blank' }} />
  <Pagination.PageButton onPress={() => {}} isActive />
  <Pagination.PageButton onPress={() => {}} />
  <Pagination.PageButton onPress={() => {}} />
</Pagination>

Introduction

import { Pagination } from '@telus-uds/components-base'

Pagination can be used to enable a user to page through local page content or via links.

Guidance

• Pagination component accepts one or multiple Pagination.PageButton components as children and renders all or some of them (replacing the missing part with an ellipsis when there are too many pages available).
• Use onPress prop of the Pagination.PageButton component to handle the navigation.
• Alternatively, you can use the href and hrefAttrs props of the Pagination.PageButton for browser-based navigation.
• Use the isActive prop of the Pagination.PageButton component to indicate the button corresponding to the current page.
• Use copy prop (on both Pagination and Pagination.PageButton components) to specify the language of the labels or provide a custom dictionary.

Accessibility

The Pagination component itself does not accept any accessibility attributes. Pagination.PageButton, however, accepts standard accessibility props, including the ones that are specific to the button role. By default accessibility role is set to 'button' (or to link if href prop is set) and the accessibility label is based on the value of the label prop.

Props

Pagination

Name	Type	Default	Description
copy	'en' | 'fr'	'en'
LinkRouter	elementType
linkRouterProps	object
children	custom
variant	objectOf		System variant prop, see variants for more details
tokens	custom		System tokens prop, see tokens for more details
sideButtonVariant	objectOf
sideButtonTokens	custom

Pagination.PageButton

Name	Type	Default	Description
onPress	func
onPressIn	func
onPressOut	func
disabled	bool
href	string
hrefAttrs	shape
label	string
isActive	bool
copy	'en' | 'fr'
variant	objectOf		System variant prop, see variants for more details
tokens	custom		System tokens prop, see tokens for more details

Note: this component also handles all React Native accessibility props