Pagination

Pagination with first, previous, next, and last page buttons.

Code

import {
  Pagination,
  PaginationContent,
  PaginationFirst,
  PaginationItem,
  PaginationLabel,
  PaginationLast,
  PaginationNext,
  PaginationPrevious,
} from "@falcon/ui-kit";
import { useState } from "react";

const PAGE_COUNT = 10;

export function Example() {
  const [page, setPage] = useState(1);

  return (
    <Pagination>
      <PaginationLabel>
        Page {page} of {PAGE_COUNT}
      </PaginationLabel>

      <PaginationContent>
        <PaginationItem>
          <PaginationFirst disabled={page === 1} onClick={() => setPage(1)} />
        </PaginationItem>

        <PaginationItem>
          <PaginationPrevious
            disabled={page === 1}
            onClick={() => setPage(page - 1)}
          />
        </PaginationItem>

        <PaginationItem>
          <PaginationNext
            disabled={page === PAGE_COUNT}
            onClick={() => setPage(page + 1)}
          />
        </PaginationItem>

        <PaginationItem>
          <PaginationLast
            disabled={page === PAGE_COUNT}
            onClick={() => setPage(PAGE_COUNT)}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Composition

Use the following composition to build a Pagination:

Pagination
├── PaginationLabel
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationFirst
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationNext
    └── PaginationItem
        └── PaginationLast

API

Pagination

Renders a <nav> element and accepts all <nav> props.

Props

aria-label

aria-label?: string = "pagination"

Defines an accessible label for the element

PaginationLabel

Renders a <p> element and accepts all <p> props.

PaginationContent

Renders a <ul> element and accepts all <ul> props.

PaginationItem

Renders an <li> element and accepts all <li> props.

PaginationFirst

Renders the first page button as a <button> element and accepts all <button> props except children.

Props

aria-label

aria-label?: string = "Go to first page"

Defines an accessible label for the element

className

className?: string

CSS class applied to the element.

focusableWhenDisabled

focusableWhenDisabled?: boolean

Whether a disabled button stays focusable, so keyboard and screen reader users can still reach it and read its label.

nativeButton

nativeButton?: boolean

Whether the element passed to render is a native button. Set to false when rendering another element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

style

style?: React.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

PaginationPrevious

Renders the previous page button as a <button> element and accepts all <button> props except children.

Props

aria-label

aria-label?: string = "Go to previous page"

Defines an accessible label for the element

className

className?: string

CSS class applied to the element.

focusableWhenDisabled

focusableWhenDisabled?: boolean

Whether a disabled button stays focusable, so keyboard and screen reader users can still reach it and read its label.

nativeButton

nativeButton?: boolean

Whether the element passed to render is a native button. Set to false when rendering another element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

style

style?: React.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

PaginationNext

Renders the next page button as a <button> element and accepts all <button> props except children.

Props

aria-label

aria-label?: string = "Go to next page"

Defines an accessible label for the element

className

className?: string

CSS class applied to the element.

focusableWhenDisabled

focusableWhenDisabled?: boolean

Whether a disabled button stays focusable, so keyboard and screen reader users can still reach it and read its label.

nativeButton

nativeButton?: boolean

Whether the element passed to render is a native button. Set to false when rendering another element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

style

style?: React.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

PaginationLast

Renders the last page button as a <button> element and accepts all <button> props except children.

Props

aria-label

aria-label?: string = "Go to last page"

Defines an accessible label for the element

className

className?: string

CSS class applied to the element.

focusableWhenDisabled

focusableWhenDisabled?: boolean

Whether a disabled button stays focusable, so keyboard and screen reader users can still reach it and read its label.

nativeButton

nativeButton?: boolean

Whether the element passed to render is a native button. Set to false when rendering another element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

style

style?: React.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.