PageControls

• Component overview: Dot-style pagination indicator for carousels, onboarding flows, and similar scenarios. Indicates the current page position.
• Dot size: 16×4px rectangle — active dot uses Grays/Black, inactive uses Grays/Gray-4.
• Implementation note: Pure design-layer component with no ui/ primitive; styles managed in styles.ts.
• Figma spec

Basic Usage

Result

Loading...

Live Editor

function Demo() {
  const [current, setCurrent] = React.useState(0)
  return <PageControls total={4} current={current} onChange={setCurrent} />
}

Different Counts

Supports 2–8 dots.

Result

Loading...

Live Editor

<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
  <div>
    <span style={{ fontSize: 12, color: '#999', marginBottom: 4, display: 'block' }}>2 pages</span>
    <PageControls total={2} current={0} />
  </div>
  <div>
    <span style={{ fontSize: 12, color: '#999', marginBottom: 4, display: 'block' }}>4 pages</span>
    <PageControls total={4} current={1} />
  </div>
  <div>
    <span style={{ fontSize: 12, color: '#999', marginBottom: 4, display: 'block' }}>8 pages</span>
    <PageControls total={8} current={3} />
  </div>
</div>

Token

State	Dot color
Active	Grays/Black#000000
Inactive	Grays/Gray-4#ADADAD

Props

Prop	Type	Default	Description
total	number	—	Total number of pages (2–8)
current	number	0	Currently selected page index (0-based)
onChange	(index: number) => void	—	Page change callback
className	string	—	Custom style class