import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import Controlled from "examples/pagination/controlled.tsx";
import Uncontrolled from "examples/pagination/uncontrolled.tsx";
import Labels from "examples/pagination/labels.tsx";
import Customization from "examples/pagination/overrides.tsx";

import { StatefulPagination } from "baseui/pagination";
import * as PaginationExports from "baseui/pagination";

import Yard from "../../components/yard/index";
import paginationYardConfig from "../../components/yard/config/pagination";

export default Layout;

# Pagination

<Yard placeholderHeight={52} {...paginationYardConfig} />

Divide content into separate pages.

## When to use

- When the user will be searching for information rather than scanning.
- When the user must maintain a sense of position amongst the paginated elements.

## Accessibility

- `Tab` moves focus among the focus-able elements (button, dropdown)
- `Escape` closes the dropdown once opened
- `Up / Down Arrow Keys` are used to navigate the options in the dropdown

## Examples

<Example title="Pagination Controlled example" path="pagination/controlled.tsx">
  <Controlled />
</Example>

<Example
  title="Pagination Uncontrolled example"
  path="pagination/uncontrolled.tsx"
>
  <Uncontrolled />
</Example>

<Example title="Pagination with Custom Labels" path="pagination/labels.tsx">
  <Labels />
</Example>

<Example title="Pagination with Overrides" path="pagination/overrides.tsx">
  <Customization />
</Example>

<Exports
  component={PaginationExports}
  title="Pagination exports"
  path="baseui/pagination"
/>