Skip to content

Count Indicator

A count indicator shows the user’s current position within a sequence as plain text — “1 of 6” — paired with previous and next icon buttons.

Ready to use

DesignDevelopAccessibility

The Count Indicator (also known as pagination read-out) shows the user’s current position within a sequence as plain text — “1 of 6” — paired with prev/next icon buttons. It’s commonly used in image carousels, galleries, step-by-step flows, or small collections where space is limited and full pagination controls are unnecessary.

Anatomy

Section titled “Anatomy”
1 of 6
  1. Page indicator
  2. Label
  3. Previous
  4. Next

When to use it

Section titled “When to use it”

Use the Count Indicator when:

  • Navigation is simple and sequential — image sliders, onboarding screens, galleries.
  • The current position needs to be clear and the boundaries communicated by disabled icon buttons.

Avoid the Count Indicator when:

  • The collection is large or complex and needs full pagination.
  • Subtle colour shifts are the only cue at the boundaries — disable the prev/next buttons so the chevron shape carries the signal.

Properties

Section titled “Properties”

Variant

Two variants tuned to the surface beneath: On Solid for default page surfaces (bare text label, no backdrop) and On Image for overlays (label picks up a backdrop and border so the text stays legible against busy backgrounds). Both share the same height and inline padding; only fill and border change.

Scheme

Neutral or Contrast. The foreground tokens flip via the CDS scheme — on a light surface (default), the label uses the neutral foreground; on a dark surface (.is-contrast on the wrapper), it flips to contrast — and the icon buttons follow via the same cascade.

Icon buttons

Prev and next are standard medium Icon Buttons. Their height feeds into the label height so the three pieces align. At the start and end of the sequence, the relevant button is disabled to communicate the boundary.

Platform considerations

Section titled “Platform considerations”

Desktop

The wrapper sits inline at its natural width. Use the On Image variant only when the indicator overlays imagery; on plain surfaces the bare label reads more cleanly.

Tablet

Same layout as desktop. Keep the icon button size consistent with surrounding controls so the indicator doesn’t feel out of place.

Mobile

Stack the indicator with its content above or below imagery. The medium icon button stays well above the 44 px touch minimum at this size.

Best practices

Section titled “Best practices”

Make sure both the count and the disabled state of the chevrons carry meaning.

Do

Pair the indicator with simple, sequential content, disable the prev/next icon buttons at the ends so the chevron shape carries the boundary cue, and reach for the Contrast scheme when the wrapper sits on dark imagery so foreground colours flip cleanly.

Don't

Don’t use the Count Indicator for large or complex collections (full pagination or a different pattern fits better), and don’t rely on colour change alone to signal the boundary — disable the buttons so the cue is unmistakable.

Content guidelines

Section titled “Content guidelines”

The label is a position read-out, not a sentence — keep it to the bare “current of total” format (“1 of 6”). Localise the connecting word (“of” / “/” / “sur”) through the same string used elsewhere in the product so the announcement stays consistent for screen-reader users.