Pagination

since 1.0

A navigation component for dividing content across multiple pages.

Example

Size

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationDefault() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" size="default" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" size="default" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Install

import { Pagination } from "@strongtie/design-system/pagination"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Pagination
PaginationContent
PaginationEllipsis
PaginationItem
PaginationLink
PaginationNext
PaginationPrevious

Props

`<PaginationLink>`

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

`<PaginationNext>`

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

`<PaginationPrevious>`

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

Variants

size

defaultsmlgiconicon-smicon-lg

Examples

Disabled Controls

Size

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationDisabledControls() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href="#"
            size="default"
            aria-disabled="true"
            className="pointer-events-none opacity-50"
          />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon" isActive>
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" size="default" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

With Ellipsis

Size

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationWithEllipsis() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>4</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive>5</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>6</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>10</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Navigation Menu Popover

Pagination

since 1.0

A navigation component for dividing content across multiple pages.

Example

Size

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationDefault() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" size="default" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" size="default" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Install

import { Pagination } from "@strongtie/design-system/pagination"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Pagination
PaginationContent
PaginationEllipsis
PaginationItem
PaginationLink
PaginationNext
PaginationPrevious

Props

`<PaginationLink>`

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

`<PaginationNext>`

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

`<PaginationPrevious>`

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

Variants

size

defaultsmlgiconicon-smicon-lg

Examples

Disabled Controls

Size

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationDisabledControls() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href="#"
            size="default"
            aria-disabled="true"
            className="pointer-events-none opacity-50"
          />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon" isActive>
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" size="default" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

With Ellipsis

Size

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationWithEllipsis() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>4</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive>5</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>6</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>10</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Navigation Menu Popover