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:
- Do use it for simple, sequential navigation (e.g., image sliders, onboarding screens).
- Do ensure the current item is clearly distinguished (through color, size, or shape).
- Do keep the number of dots manageable (usually under 10).
- Do provide keyboard and screen-reader support if the dots are interactive.
Avoid using a Count indicator when:
- Don’t use it for large or complex collections (use full pagination or a different pattern 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).
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#000000color-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#000000color-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#ffffffcolor-fill-contrast-emphasis#ffffffEllipse (inactive dot)
Background color:
color-fill-contrast-subtle#d4d2d1color-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 |