# Pagination

Navigation component for paginated content

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
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[​](#pagination-1 "Direct link to Pagination")

Navigation component for paginated content

**Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx)

### Props[​](#props "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage "Direct link to Usage")

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

<Pagination /* props */ />

```

## PaginationContent[​](#paginationcontent "Direct link to PaginationContent")

Container for pagination items

**Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx)

### Props[​](#props-1 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-1 "Direct link to Usage")

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

<PaginationContent /* props */ />

```

## PaginationEllipsis[​](#paginationellipsis "Direct link to PaginationEllipsis")

Ellipsis indicator for skipped page numbers

**Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx)

### Props[​](#props-2 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-2 "Direct link to Usage")

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

<PaginationEllipsis /* props */ />

```

## PaginationItem[​](#paginationitem "Direct link to PaginationItem")

Individual pagination item wrapper

**Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx)

### Props[​](#props-3 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-3 "Direct link to Usage")

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

<PaginationItem /* props */ />

```

## PaginationLink[​](#paginationlink "Direct link to PaginationLink")

Clickable link for navigating to a specific page

**Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx)

### Props[​](#props-4 "Direct link to Props")

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

### Usage[​](#usage-4 "Direct link to Usage")

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

<PaginationLink /* props */ />

```

## PaginationNext[​](#paginationnext "Direct link to PaginationNext")

Button for navigating to the next page

**Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx)

### Props[​](#props-5 "Direct link to Props")

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

### Usage[​](#usage-5 "Direct link to Usage")

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

<PaginationNext /* props */ />

```

## PaginationPrevious[​](#paginationprevious "Direct link to PaginationPrevious")

Button for navigating to the previous page

**Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx)

### Props[​](#props-6 "Direct link to Props")

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

### Usage[​](#usage-6 "Direct link to Usage")

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

<PaginationPrevious /* props */ />

```