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

import { PageControl } from "baseui/page-control";
import * as PageControlExports from "baseui/page-control";

import Yard from "../../components/yard/index";
import pageControlYardConfig from "../../components/yard/config/page-control";

import Overflow from "examples/page-control/overflow.tsx";

export default Layout;

# PageControl

<Yard placeholderHeight={34} {...pageControlYardConfig} />

Page controls are a series of small indicator dots representing the available pages, screens, or elements.

## Examples

<Example title="Overflow" path="page-control/overflow.tsx">
  <Overflow />
</Example>

A maximum of five page dots will render at a time. When there are more than 5 pages, the dots will be clipped, and the indicator size will shrink on both sides to suggest more pages are available.

<Exports
  component={PageControlExports}
  title="PageControl exports"
  path="baseui/page-control"
/>