Live code
Storybook
Usage
Pagination
Example with the current item in the first place
<Pagination>
<PaginationItem>
<PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 1" pageNumber={1} />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" accessibilityLabel="Go to Page 2" pageNumber={2} />
</PaginationItem>
{'...'}
<PaginationItem>
<PaginationLinkNext href="#" />
</PaginationItem>
</Pagination>Example with the current item in the middle
<Pagination>
<PaginationItem>
<PaginationLinkPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" accessibilityLabel="Go to Page 11" pageNumber={11} />
</PaginationItem>
{'...'}
<PaginationItem>
<PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 13" pageNumber={13} />
</PaginationItem>
{'...'}
<PaginationItem>
<PaginationLink href="#" accessibilityLabel="Go to Page 15" pageNumber={15} />
</PaginationItem>
<PaginationItem>
<PaginationLinkNext href="#" />
</PaginationItem>
</Pagination>Example with the current item in the last place
<Pagination>
<PaginationItem>
<PaginationLinkPrevious href="#" />
</PaginationItem>
{'...'}
<PaginationItem>
<PaginationLink href="#" accessibilityLabel="Go to Page 112" pageNumber={112} />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 113" pageNumber={113} />
</PaginationItem>
</Pagination>Example with the first current item, centered
<Pagination UNSAFE_className="text-center">
<PaginationItem>
<PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 1" pageNumber={1} />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" accessibilityLabel="Go to Page 2" pageNumber={2} />
</PaginationItem>
{'...'}
<PaginationItem>
<PaginationLinkNext href="#" />
</PaginationItem>
</Pagination>Uncontrolled Pagination
<UncontrolledPagination
totalPages={10}
defaultPage={5}
onChange={(pageNumber) => {
console.log(pageNumber);
}}
/>Pagination props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | null | ✕ | Content of the Pagination wrapper |
| listProps | SpiritUListElementProps | {} | ✕ | Props for the inner UL element props |
Other unnamed props of this component are formed from the HTML element.
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
PaginationItem props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | null | ✕ | Content of the Item |
Other unnamed props of this component are formed from the LI element.
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
PaginationLink props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| accessibilityLabel | string | null | ✔ | Accessibility label of the link |
| elementType | ElementType | a | ✕ | Type of an element |
| isCurrent | bool | null | ✕ | If true, the link is marked as current |
| pageNumber | number | — | ✔ | Page number, hidden for screen readers |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
PaginationButtonLink props
This component extends the Button component with directional arrows and a hidden label.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| accessibilityLabel | string | null | ✔ | Accessibility label of the link |
| direction | [previous | next] | null | ✔ | The direction according to which the corresponding icon is displayed |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
PaginationLinkPrevious props
This component extends the PaginationButtonLink component.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| accessibilityLabel | string | Previous | ✕ | Accessibility label of the link |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
PaginationLinkNext props
This component extends the PaginationButtonLink component.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| accessibilityLabel | string | Next | ✕ | Accessibility label of the link |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
UncontrolledPagination props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| accessibilityLabel | string | - | ✕ | Accessibility label of the page links |
| accessibilityLabelNext | string | Next | ✕ | Accessibility label of the next link |
| accessibilityLabelPrevious | string | Previous | ✕ | Accessibility label of the previous link |
| defaultPage | number | 1 | ✕ | The number of the page selected as current page at the first render |
| onChange | (pageNumber: number) => void | - | ✕ | On page change callback |
| totalPages | number | 0 | ✔ | Total count of pages |
| visiblePages | number | 5 | ✕ | Number of displayed pages |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
Icons Provider
To display the icons correctly, the component needs to be wrapped with IconsProvider.
import { IconsProvider } from 'packages/web-react/src/context';
<IconsProvider>
<Pagination>...</Pagination>
</IconsProvider>;For detailed information see Pagination component.