Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Pagination

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the Pagination component is PAGINATION_STYLES.

You can not change the name of the object of tokens.

There is one prop that allows to modify different aspects of the component:

  • Variant: modify the styles of the Pagination.

Variants

Variants can modify the styles for the Pagination. The tokens used are:

  • container: CommonStyleType;
  • pagesContainer: TypographyTypes;
  • paginationLeftArrowIcon: PaginationArrowIconStyleType;
  • paginationRightArrowIcon: PaginationArrowIconStyleType;
  • paginationCountersNumber: PaginationCounterNumber;
12345678910
const PAGINATION_STYLES {
  [VARIANT]: {
    container?: CommonStyleType,
    pagesContainer?: CommonStyleType,
    paginationLeftArrowIcon?: IconTypes & { disabled?: IconTypes },
    paginationRightArrowIcon?: IconTypes & { disabled?: IconTypes },
    paginationCountersNumber?: {
      [DEVICE_BREAKPOINT]?: {
        counters?: number;
      },

Additionally, it is based on states to individually modify each level. The states are:

1234
enum PaginationState {
  DEFAULT,
  SELECTED,
}

And the internal state tokens are:

123456789
  const PAGINATION_STYLES = {
    [VARIANT]: {
      ...restTokens,
      [PAGINATION_STATE]?: {
        pageContainer?: CommonStyleType & { clickable?: CommonStyleType };
        page?: TypographyTypes;
      },
    }
  }

Example

Pagination theme object example:

12345678910
const PAGINATION_STYLES = {
  [VARIANT]: {
    container: {
      background_color: 'background-color',
      display: 'display',
    },
    pagesContainer: {
      width: 'width',
      height: 'height'
    },
PaginationCode API
Stepper numberUsage