Pagination

a control that enables selection of a single page from a range of pages

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

numberEdgePages

The number of pagination buttons visible at the start and end of page range.

numberItems

The total number of items to paginate.

number

numberMiddlePages

The number of pagination buttons visible in the middle of the controls.

onChange

Function called when the user clicks a page or arrow button. The single argument is an event containing the target page via event.page, and the startIndex and endIndex for items contained in the target page via event.startIndex and event.endIndex, respectively.

({ page, startIndex, endIndex }) => {...}

page

The default page. If used with onChange, it can be used to control the active page via state.

number

size

Specifies what size the pagination control buttons should be.

"small""medium""large"

step

The number of items per page.

Theme

pagination.button

Any valid Button theming to apply on the pagination buttons.

{
  "active": {
    "background": {
      "color": "active-background"
    }
  },
  "color": "text-strong",
  "hover": {
    "background": {
      "color": "background-contrast"
    }
  },
  "size": {
    "small": {
      "border": {
        "radius": "3px",
        "width": "2px"
      },
      "pad": {
        "vertical": "4px",
        "horizontal": "4px"
      },
      "font": {
        "size": "14px",
        "height": "20px",
        "maxWidth": "336px"
      },
      "height": "30px",
      "width": "30px"
    },
    "medium": {
      "border": {
        "radius": "4px",
        "width": "2px"
      },
      "pad": {
        "vertical": "4px",
        "horizontal": "4px"
      },
      "font": {
        "size": "18px",
        "height": "24px",
        "maxWidth": "432px"
      },
      "height": "36px",
      "width": "36px"
    },
    "large": {
      "border": {
        "radius": "6px",
        "width": "2px"
      },
      "pad": {
        "vertical": "4px",
        "horizontal": "4px"
      },
      "font": {
        "size": "22px",
        "height": "28px",
        "maxWidth": "528px"
      },
      "height": "48px",
      "width": "48px"
    }
  }
}

pagination.container

Any valid Box props for the Box wrapping the pagination controls.

object

pagination.container.extend

Any additional style for the Box wrapping the pagination controls.

"any CSS"

(props) => {}

pagination.controls.align

How the pagination controls should be aligned within the containing Box.

"center"

pagination.controls.direction

Direction in which the containing Box should display the pagination controls.

"row"

pagination.controls.gap

Amount of gap spacing between each control.

"xxsmall"

pagination.controls.margin

Amount of margin surrounding the controls.

"none"

pagination.controls.pad

Amount of pad surrounding the controls.

"none"

pagination.icons.color

The color used for the icon.

string | { dark: string, light: string }

pagination.icons.next

Icon to use as the 'next page' control.

pagination.icons.previous

Icon to use as the 'previous page' control.