Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Pagination

Version 7.1.1GithubStorybook

Pagination lets users navigate through content or a dataset that’s been broken up into multiple pages.

Installation

Installation page anchor
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>
  );
};

Pagination

Pagination page anchor

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
string
Default
'PAGINATION'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'PAGINATION_ITEMS'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'PAGINATION_LABEL'

as

Type
AsTags

href

Type
string

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
string
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

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'PAGINATION_NUMBERS'

pageLabel

Page label text used in PaginationLabel.

Type
string

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
string
Default
'PAGINATION_NUMBER'

href

Type
string

isCurrent

Applies the current page styles and aria-current property to the PaginationNumber.

Type
boolean