Pagination

Props

The Pagination component accepts the following props:

Color

Type: string
Default: primary
Options: danger | warning | success | primary | bgce | primary | secondary

The color prop sets the color of the pagination buttons. You can choose from a range of colors including red, green, orange, primary, purple, secondary, bgce and brown.

import { Flex, Pagination } from '@pillar-ui/core'

export function PaginationDefault() {
  return (
    <Flex gap="sm" items="center">
      <Pagination />
      <Pagination color="dan" />
      <Pagination color="suc" />
      <Pagination color="war" />
      <Pagination color="pri" />
      <Pagination color="sec" />
      <Pagination color="bgce" />
    </Flex>
  )
}

Variant

The variant prop sets the style of the pagination buttons. You can choose from three variants: default, soft and solid.

import { Flex, Pagination } from '@pillar-ui/core'

export function PaginationDefault() {
  return (
    <Flex gap="sm" items="center">
      <Pagination variant="soft" />
      <Pagination variant="solid" />
      <Pagination variant="outline" />
    </Flex>
  )
}

Corner

The corner prop sets the corner style of the pagination buttons. You can choose from a range of corner styles including sharp, xs, sm, md, lg, xl and full.

import { Flex, Pagination } from '@pillar-ui/core'

export function PaginationDefault() {
  return (
    <Flex gap="sm" items="center">
      <Pagination />
      <Pagination corner="full" />
      <Pagination corner="xs" />
      <Pagination corner="sm" />
      <Pagination corner="md" />
      <Pagination corner="lg" />
      <Pagination corner="xl" />
      <Pagination corner="circle" />
      <Pagination corner="radius" />
    </Flex>
  )
}

Size

Type: string
Default: md
Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop sets the size of the pagination buttons. You can choose from a range of sizes including 3xs, 2xs, xs, sm, md, lg, xl, 2xl and 3xl.

import { Flex, Pagination } from '@pillar-ui/core'

export function PaginationDefault() {
  return (
    <Flex gap="sm" items="center">
      <Pagination />
      <Pagination size="2xs" />
      <Pagination size="xs" />
      <Pagination size="sm" />
      <Pagination size="md" />
      <Pagination size="lg" />
      <Pagination size="xl" />
      <Pagination size="2xl" />
    </Flex>
  )
}

Use Case

The Pagination component is used to navigate between pages of content. It can be used in various scenarios such as when you have a large dataset that needs to be split into multiple pages or when you have a long article that needs to be split into multiple sections.

Troubleshooting

If you encounter any issues while using the Pagination component, please check if you have imported it correctly and if you are passing valid props.

Conclusion

The Pagination component is a versatile and easy-to-use component that can be used to navigate between pages of content. It comes with a range of customization options and follows accessibility best practices.

Pillar UI React Pagination Component documentation