# Component/PageIndicator

> Props: component-pageindicator.props.txt

## Examples


### Base

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [page, setPage] = useState<number>(args.page ?? 1);
    return <PageIndicator {...args} page={page} onChange={setPage} />;
  }
}
```

### Disabled

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [page, setPage] = useState<number>(args.page ?? 1);
    return <PageIndicator {...args} page={page} onChange={setPage} />;
  },
  args: {
    totalPages: 20,
    disabled: true
  }
}
```

### Size

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [page, setPage] = useState<number>(args.page ?? 1);
    return <PageIndicator {...args} page={page} onChange={setPage} />;
  },
  args: {
    totalPages: 20
  },
  render: args => {
    const [page, setPage] = useState<number>(args.page ?? 1);
    const [page2, setPage2] = useState<number>(args.page ?? 1);
    return <Stack direction='column' gap={16}>
        <Stack direction='column'>
          <BaseText kind='Body_13_Bold'>medium</BaseText>
          <PageIndicator {...args} page={page} onChange={setPage} size='medium' />
        </Stack>
        <Stack direction='column'>
          <BaseText kind='Body_13_Bold'>small</BaseText>
          <PageIndicator {...args} page={page2} onChange={setPage2} size='small' />
        </Stack>
      </Stack>;
  }
}
```