Pagination

Pagination provides navigation controls for multi-page content with page numbers, previous/next buttons, and ellipsis.

Preview

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@e-infra/design-system'

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationEllipsis />
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Components

Component	Description
`Pagination`	Container (nav element)
`PaginationContent`	Content wrapper (ul)
`PaginationItem`	Individual item (li)
`PaginationLink`	Page number link
`PaginationPrevious`	Previous page button
`PaginationNext`	Next page button
`PaginationEllipsis`	Ellipsis indicator

Props

PaginationLink

Prop	Type	Default	Description
isActive	boolean	`false`	Current page indicator
size	`default` \| `sm` \| `lg` \| `icon`	`icon`	Button size
className	string	-	Additional CSS classes
...props	React.AnchorHTMLAttributes	-	Native anchor props

PaginationPrevious/PaginationNext

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	PaginationLink props	-	Extended PaginationLink props

Pagination

Pagination provides navigation controls for multi-page content with page numbers, previous/next buttons, and ellipsis.

Preview

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@e-infra/design-system'

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationEllipsis />
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Components

Component	Description
`Pagination`	Container (nav element)
`PaginationContent`	Content wrapper (ul)
`PaginationItem`	Individual item (li)
`PaginationLink`	Page number link
`PaginationPrevious`	Previous page button
`PaginationNext`	Next page button
`PaginationEllipsis`	Ellipsis indicator

Props

PaginationLink

Prop	Type	Default	Description
isActive	boolean	`false`	Current page indicator
size	`default` \| `sm` \| `lg` \| `icon`	`icon`	Button size
className	string	-	Additional CSS classes
...props	React.AnchorHTMLAttributes	-	Native anchor props

PaginationPrevious/PaginationNext

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	PaginationLink props	-	Extended PaginationLink props