Pagination

The Pagination component provides you with page navigation and pagination.

Live Examples

Storybook: components-pagination--default

Storybook: components-pagination--with-many-pages

Storybook: components-pagination--compact

Code Examples

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@nostromo/ui-core'
 
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>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Props

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Whether link is active
`href`	`string`	-	Link URL

Breadcrumb Alert