Pagination

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

Pagination renders a responsive page navigation control and delegates link or button rendering to a child render function.

Primary

Code

<Pagination activePage={5} pageCount={12}>
  {(page, props) => (
    <a
      {...props}
      href={page == null ? undefined : `https://example.com/?page=${page}`}
      rel="noopener"
      target="_blank"
    />
  )}
</Pagination>

Buttons

Code

<Pagination activePage={5} pageCount={12}>
  {(page, props) => (
    <button
      {...props}
      disabled={page == null}
      type="button"
      onClick={() => {}}
    />
  )}
</Pagination>

State Variations

Code

<div
  style={{
    minWidth: 300,
    overflow: "hidden",
    resize: "horizontal",
    width: 600,
  }}
>
  <FlexWrapper direction="column" gap={32}>
    {Array.from({ length: 12 }, (_, i) => i + 1).map((activePage) => (
      <Pagination activePage={activePage} key={activePage} pageCount={12}>
        {(page, props) => (
          <a
            {...props}
            href={
              page == null ? undefined : `https://example.com/?page=${page}`
            }
            rel="noopener"
            target="_blank"
          />
        )}
      </Pagination>
    ))}
  </FlexWrapper>
</div>

API

Pagination

Name	Type/Description
activePage	number
className	string | undefined
pageCount	number