PageControl

PageControl is a compound component for short page or step indicators, usually in carousels and onboarding flows.

Overview

PageControl styling is driven by size-specific dot dimensions and item-level background tokens. PageControlProgress extends the same dot model with width animation.

Public CSS Variables

Variable	Value	Affects
base dot sizeitems and progress		No visible change in this state
default backgrounditems/progress		No visible change in this state
hover stateitems		No visible change in this state
active stateitems/progress		No visible change in this state
animation durationprogress item		No visible change in this state
focus outlineitems		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root sets row layout, gap, and touch-action: none.

Item

PageControlItem maps size to circular dot dimensions and active background.

Progress Item

PageControlProgress expands width when active and animates its fill through the ::after pseudo-element.

State And Variant Interaction

size controls dot diameter
active state changes the base background
progress items use --duration to control the animated fill

Examples

Large page control

LTRRTL

large-page-control.tsx · 11 lines

import { PageControl, PageControlItem } from '@vega-ui/react';

export default function LargePageControl() {
  return (
    <PageControl size='lg' defaultActive={0} aria-label='Onboarding screens'>
      <PageControlItem index={0} aria-label='Welcome' />
      <PageControlItem index={1} aria-label='Connect your calendar' />
      <PageControlItem index={2} aria-label='Invite your team' />
    </PageControl>
  );
}

Do Not Override

removing focus visibility from items
using progress width animation when the product does not actually advance over time