Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Pagination

Navigation component for paginated content

## Example​

    import {
      Pagination,
      PaginationContent,
      PaginationEllipsis,
      PaginationItem,
      PaginationLink,
      PaginationNext,
      PaginationPrevious,
    } from "@databricks/appkit-ui/react"

    export default function PaginationExample() {
      return (
        <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>
            <PaginationItem>
              <PaginationEllipsis />
            </PaginationItem>
            <PaginationItem>
              <PaginationNext href="#" />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      )
    }

## Pagination​

Navigation component for paginated content

Source: `packages/appkit-ui/src/react/ui/pagination.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

    import { Pagination } from '@databricks/appkit-ui';

    <Pagination /* props */ />

## PaginationContent​

Container for pagination items

Source: `packages/appkit-ui/src/react/ui/pagination.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

    import { PaginationContent } from '@databricks/appkit-ui';

    <PaginationContent /* props */ />

## PaginationEllipsis​

Ellipsis indicator for skipped page numbers

Source: `packages/appkit-ui/src/react/ui/pagination.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

    import { PaginationEllipsis } from '@databricks/appkit-ui';

    <PaginationEllipsis /* props */ />

## PaginationItem​

Individual pagination item wrapper

Source: `packages/appkit-ui/src/react/ui/pagination.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

    import { PaginationItem } from '@databricks/appkit-ui';

    <PaginationItem /* props */ />

## PaginationLink​

Clickable link for navigating to a specific page

Source: `packages/appkit-ui/src/react/ui/pagination.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`isActive` | `boolean` |  | - | -
`size` | `"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null` |  | `icon` | -

### Usage​

    import { PaginationLink } from '@databricks/appkit-ui';

    <PaginationLink /* props */ />

## PaginationNext​

Button for navigating to the next page

Source: `packages/appkit-ui/src/react/ui/pagination.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`isActive` | `boolean` |  | - | -
`size` | `"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null` |  | - | -

### Usage​

    import { PaginationNext } from '@databricks/appkit-ui';

    <PaginationNext /* props */ />

## PaginationPrevious​

Button for navigating to the previous page

Source: `packages/appkit-ui/src/react/ui/pagination.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`isActive` | `boolean` |  | - | -
`size` | `"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null` |  | - | -

### Usage​

    import { PaginationPrevious } from '@databricks/appkit-ui';

    <PaginationPrevious /* props */ />