Pillar UI React Pagination Component documentation
Simplify navigation through large datasets with a customizable Pagination component for React. Easily display page numbers, previous/next buttons, and jump controls.
Components:
Type
import
import { Pillar UI React Pagination Component } from '@pillar-ui/core'
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.