Default
With Ellipsis
Middle Page Active
Sub-components
| Component | Description |
|---|---|
| Pagination | Root nav element with aria-label |
| Pagination.Content | Flex container for pagination items |
| Pagination.Item | List item wrapper |
| Pagination.Link | Page link with isActive state |
| Pagination.Previous | Previous page link with chevron |
| Pagination.Next | Next page link with chevron |
| Pagination.Ellipsis | Ellipsis indicator for skipped pages |
Link Props
| Prop | Type | Description |
|---|---|---|
| isActive | boolean | Highlights the current page link |
| size | "sm" | "md" | "lg" | "icon" | Size variant for pagination links |
| className | string | Additional classes |
Usage
<Pagination>
<Pagination.Content>
<Pagination.Item>
<Pagination.Previous href="#" />
</Pagination.Item>
<Pagination.Item>
<Pagination.Link href="#" isActive>1</Pagination.Link>
</Pagination.Item>
<Pagination.Item>
<Pagination.Link href="#">2</Pagination.Link>
</Pagination.Item>
<Pagination.Item>
<Pagination.Ellipsis />
</Pagination.Item>
<Pagination.Item>
<Pagination.Next href="#" />
</Pagination.Item>
</Pagination.Content>
</Pagination>