yarn add @twilio-paste/pagination - or - yarn add @twilio-paste/core
import {
Pagination,
PaginationItems,
PaginationArrow,
PaginationLabel,
PaginationNumbers,
PaginationNumber,
PaginationEllipsis,
} from '@twilio-paste/core/pagination';
const Component = () => {
return (
<Pagination label="pagination navigation">
<PaginationItems>
<PaginationArrow variant="back" label="Go to previous page" visibleLabel="Previous" />
<PaginationNumbers pageLabel="Page 5 of 10">
<PaginationNumber label="Go to page 1">1</PaginationNumber>
<PaginationEllipsis label="Collapsed previous pages" />
<PaginationNumber label="Go to page 4">4</PaginationNumber>
<PaginationNumber label="Go to page 5" isCurrent>
5
</PaginationNumber>
<PaginationNumber label="Go to page 6">6</PaginationNumber>
<PaginationEllipsis label="Collapsed next pages" />
<PaginationNumber label="Go to page 10">10</PaginationNumber>
</PaginationNumbers>
<PaginationArrow variant="forward" label="Go to next page" visibleLabel="Next" />
</PaginationItems>
</Pagination>
);
};
label RequiredRequired
Accessible label for Pagination, used as the aria-label.
- Type
string- Default
'PAGINATION'
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGINATION'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGINATION_ITEMS'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGINATION_LABEL'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
as
- Type
AsTags
href
- Type
string
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
label RequiredRequired
Used as the title for the back or forward button icon.
- Type
string- Default
'back'
variant RequiredRequired
Visible text of the button or anchor.
- Type
Variants- Default
'back'
as
- Type
AsTags
disabled
- Type
boolean
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGINATION_ARROW'
href
- Type
string
isFocused
- Type
boolean- Default
'false'
isHovered
- Type
boolean- Default
'false'
visibleLabel
Visible text of the button or anchor.
- Type
string
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGINATION_NUMBERS'
pageLabel
Page label text used in PaginationLabel.
- Type
string
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
label RequiredRequired
Accessible label for PaginationNumber, used as the aria-label.
- Type
string
as
- Type
AsTags
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGINATION_NUMBER'
href
- Type
string
isCurrent
Applies the current page styles and aria-current property to the PaginationNumber.
- Type
boolean
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.