PageIndicator

Server component, no client JS

ImportCopy Anchor Link

import { PageIndicator } from '@nizivo/react/page-indicator';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/page-indicator.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript. It shows a position the page already knows; the carousel or the steps around it own the controls. How to choose.

Dots or fractionCopy Anchor Link

variant="dots" (the default) draws one dot per page, and the current one longer and in the brand colour, so the position does not rest on colour alone. variant="fraction" shows "2 / 9" in a pill, better for more than about seven pages. count is how many there are and current the one shown now, from 1; current is kept between 1 and count.

On a photoCopy Anchor Link

tone="media" is for an indicator over a photo or a video: white dots, and a dark chip with white text. Design has not drawn an on-media colour family yet, so it uses bg/code and text/on-dark, as the storefront patterns do; their contrast holds in light and dark because neither flips.

Screen readersCopy Anchor Link

The dots and the chip are aria-hidden. A visually hidden "2 of 9" says the position instead; labels.position (with {current} and {count}) replaces it, for example labels={{ position: 'Photo {current} of {count}' }}, and locale formats the numbers. It is a server part, so a NizivoConfig's labels do not reach it: pass labels on each instance.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { PageIndicator } from '@nizivo/react/page-indicator';

export function PageIndicatorExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 16, justifyItems: 'start' }}>
      <PageIndicator count={4} current={1} />
      <PageIndicator count={9} current={2} variant="fraction" />
    </div>
  );
}

import type { JSX } from 'react';
import { PageIndicator } from '@nizivo/react/page-indicator';

export function PageIndicatorMediaExample(): JSX.Element {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'flex-end',
        justifyContent: 'space-between',
        boxSizing: 'border-box',
        inlineSize: 320,
        blockSize: 200,
        padding: 12,
        borderRadius: 12,
        background: 'linear-gradient(135deg, #c9b79c, #8a6e4b)',
      }}
    >
      <PageIndicator count={4} current={3} tone="media" />
      <PageIndicator count={4} current={3} variant="fraction" tone="media" />
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

PageIndicatorLabels type

import type { PageIndicatorLabels } from '@nizivo/react/page-indicator'

PageIndicator's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
positionrequired	string	'{current} of {count}'	The position, read by a screen reader instead of the visual: {current} and {count}.

PageIndicatorProps type

import type { PageIndicatorProps } from '@nizivo/react/page-indicator'

The props of PageIndicator, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-page-indicator, .nz-page-indicator-dot, .nz-page-indicator-dots, .nz-page-indicator-fraction.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none