Pagination

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

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/ds-allium'

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.

Platform considerations

The component is available on both native platforms and web.

Keep in mind though that this is a responsive component: it displays less buttons and visually hides the text for Previous and Next buttons when displayed in XS and SM viewports.

Props

Pagination

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

Pagination.PageButton

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

Note: this component also handles all React Native accessibility props

Tokens

In exceptional circumstances, the following tokens can be passed to these components to override their default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

Pagination

View Tokens

Prop Name	Token Property	Token Type
tokens	gap	size
	truncateAbove	integer
	color	color
	fontName	fontName
	fontWeight	fontWeight
	fontSize	fontSize
	lineHeight	lineHeight

Pagination.PageButton

View Tokens

Prop Name	Token Property	Token Type
tokens	borderColor	color
	borderWidth	border
	borderRadius	radius
	backgroundColor	color
	paddingLeft	size
	paddingRight	size
	paddingTop	size
	paddingBottom	size
	width	size
	outerBorderColor	color
	outerBorderWidth	border
	outerBorderGap	size
	color	color
	fontName	fontName
	fontWeight	fontWeight
	fontSize	fontSize
	lineHeight	lineHeight
	textAlign	flexJustifyContent
	textLine	textLine

Figma

Variants

This component does not have any stylistic variants.

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support