Count Indicator
The Count Indicator (also known as pagination dots or carousel indicators) provides a quick visual cue to show where the user is within a sequence. It communicates:
- Current position (which item is being viewed)
- Total number of items
- Progress through the sequence
It’s commonly used in image carousels, step-by-step flows, or small collections where space is limited and full pagination controls are unnecessary.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use a Count Indicator for:
- Simple, sequential navigation (e.g., image sliders, onboarding screens).
- Ensuring the current item is clearly distinguished (through color, size, or shape).
- Keeping the number of dots manageable (usually under 10).
- Providing keyboard and screen-reader support if the dots are interactive.
Avoid using a Count Indicator when:
- You have large or complex collections (use full pagination or a different pattern instead).
- You rely only on subtle color changes — the active state must be clearly visible.
- You need text content inside the dots (they should remain simple visual indicators).
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Use semantic elements when appropriate — a decorative container (e.g.,
<div role="separator">) for dividers that are visual only. - The active dot must have sufficient color contrast against the background (WCAG 1.4.11).
- Provide
aria-live="polite"on the helper text so screen readers announce changes. - Navigation buttons must have descriptive
aria-labelattributes. - Keep dots out of the tab order if they are purely decorative; use
aria-hidden="true".
Properties
Section titled “Properties”Anatomy
Section titled “Anatomy”Count indicator
Width: 283
Progress text
Text style: Body/8-default
Icon Button (previous)
Depends on: Icon Button
Type: Outlined
Size: SM
Background: True
Icon Button (next)
Depends on: Icon Button
Type: Outlined
Size: SM
Background: True
dots
Height: 4
Progress bar (active dot)
Height: 4
Width: 24
Border radius: 50
Ellipse (inactive dot)
Height: 4
Width: 4
Position : 1st by Contrast
Section titled “Position : 1st by Contrast”False
Progress text
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830Icon Button (previous)
Contrast: False
State: Disabled
Icon Button (next)
Contrast: False
State: Active
Progress bar (active dot)
Background color:
color-fill-neutral-emphasis#4d4d4dcolor-fill-neutral-emphasis#000000Ellipse (inactive dot)
Background color:
color-fill-neutral-subtle#e5e3e1color-fill-neutral-subtle#6c7073Position : Mid by Contrast
Section titled “Position : Mid by Contrast”False
Progress text
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830Icon Button (previous)
Contrast: False
State: Active
Icon Button (next)
Contrast: False
State: Active
Progress bar (active dot)
Background color:
color-fill-neutral-emphasis#4d4d4dcolor-fill-neutral-emphasis#000000Ellipse (inactive dot)
Background color:
color-fill-neutral-subtle#e5e3e1color-fill-neutral-subtle#6c7073True
Progress text
Text color:
color-foreground-contrast-emphasis#ffffffcolor-foreground-contrast-emphasis#ffffffIcon Button (previous)
Contrast: True
State: Active
Icon Button (next)
Contrast: True
State: Active
Progress bar (active dot)
Background color:
color-fill-contrast-emphasis#f5f5f5color-fill-contrast-emphasis#ffffffEllipse (inactive dot)
Background color:
color-fill-contrast-subtle#4d4d4dcolor-fill-contrast-subtle#a8aaacBoolean properties
Section titled “Boolean properties”Has helper
Progress text
Property type: Boolean
Default: true
Has buttons
buttons
Property type: Boolean
Default: true
Has dots
dots
Property type: Boolean
Default: true
Layout and spacing
Section titled “Layout and spacing”Count indicator
Count indicator
Direction: Horizontal
Alignment: Middle right
Vertical resizing: Hug
Horizontal resizing: Fixed
Item spacing: 8
buttons
buttons
Direction: Horizontal
Alignment: Middle left
Vertical resizing: Hug
Horizontal resizing: Hug
Item spacing: 8
dots
dots
Direction: Horizontal
Alignment: Middle left
Vertical resizing: Fixed
Horizontal resizing: Hug
Item spacing: 8
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
color-foreground-neutral-default | Text color | Progress text |
color-foreground-neutral-default | Text color | Progress text |
color-fill-neutral-emphasis | Background color | Progress bar (active dot) |
color-fill-neutral-emphasis | Background color | Progress bar (active dot) |
color-fill-neutral-subtle | Background color | Ellipse (inactive dot) |
color-fill-neutral-subtle | Background color | Ellipse (inactive dot) |
color-foreground-contrast-emphasis | Text color | Progress text (contrast) |
color-foreground-contrast-emphasis | Text color | Progress text (contrast) |
color-fill-contrast-emphasis | Background color | Progress bar (active dot, contrast) |
color-fill-contrast-emphasis | Background color | Progress bar (active dot, contrast) |
color-fill-contrast-subtle | Background color | Ellipse (inactive dot, contrast) |
color-fill-contrast-subtle | Background color | Ellipse (inactive dot, contrast) |
Spacing
Section titled “Spacing”| Name | Applied as | Applied to |
|---|---|---|
spacing-08 | Item spacing / Gap | Dots, Buttons, Count indicator |
spacing-08 | Item spacing / Gap | Dots, Buttons, Count indicator |
spacing-08 | Dot size | Ellipse (inactive dot) |
spacing-08 | Dot size | Ellipse (inactive dot) |
spacing-24 | Inline size | Progress bar (active dot) |
spacing-24 | Inline size | Progress bar (active dot) |
radius-xl | Border radius | Dots |
radius-xl | Border radius | Dots |
Text Styles
Section titled “Text Styles”| Name | Applied as | Applied to |
|---|---|---|
Lorem Ipsum typography-body-8 | Text style | Progress text |
Lorem Ipsum typography-body-8 | Text style | Progress text |
Accessibility
Section titled “Accessibility”For Design
Section titled “For Design”- Active state visibility — The active dot (progress bar) must be clearly distinguishable from inactive dots through both size (24px vs 4px) and color changes. Do not rely solely on color.
- Contrast — Ensure sufficient contrast between the dots and the background surface. The contrast scheme tokens (
color-fill-contrast-emphasis,color-fill-contrast-subtle) are provided for use on dark or image backgrounds. - Navigation buttons — Previous/next buttons use the Icon Button component at SM size with an outlined style. The previous button should show a disabled state when at the first position.
For Dev
Section titled “For Dev”- Wrap the component in a
role="group"witharia-roledescription="carousel"and anaria-labelto give screen readers context. - Add
aria-live="polite"to the helper text element so screen readers announce position changes. - When the dot count does not match the actual item count, add
aria-hidden="true"to the dots container — the helper text already conveys the current state. - When each dot maps 1:1 to an actual item, use
role="group"andaria-labelon the dots container, and mark each dot witharia-current="step"for the active item. - Navigation buttons must have descriptive
aria-labelattributes (e.g., “Previous”, “Next”).
Guidance on how to use a component.
- Use the count indicator for simple, sequential navigation (e.g., image sliders, onboarding screens).
- Clearly distinguish the current item through color, size, or shape.
- Keep the number of dots manageable (usually under 10).
- Provide keyboard and screen-reader support if the dots are interactive.
Guidance on what to avoid when using a component.
- Don’t use the count indicator for large or complex collections — use full pagination instead.
- Don’t rely only on subtle color changes — the active state must be clearly visible.
- Don’t add text content inside the dots — they should remain simple visual indicators.