# Component/PageIndicator

> Props: component-pageindicator.props.txt

## Examples


### Base

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

### Disabled

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

### Size

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