Dot Indicator
Sourcecomponents/DotIndicator.astro
The dots
A row of pagination dots for a carousel or stepper — count dots with active shown as a wider violet pill. Each dot is a real button, so it's keyboard-reachable and can jump to that item. Click a dot below.
click a dot
On dark & image
surface="dark" — white dots for over imagery or on a dark card.
surface="dark"
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
count | number | — | How many dots. Required. |
active | number | 0 | The current index (0-based) — that dot becomes the wider violet pill. |
surface | 'light' | 'dark' | 'light' | Ink dots on a page, or white dots over imagery / on dark. |
label | string | 'Slide' | Accessible label — "Slide 1", "Slide 2", … |
dot:select | event | — | Fires on the group when a dot is clicked; detail is the index. A parent (e.g. a carousel) listens and jumps. |
Usage
Presentational — the parent owns the current index and re-renders (or updates data-dot state). Listen for dot:select to jump. Used inside the Case Carousel.
<DotIndicator count={5} active={2} />
<!-- over imagery -->
<DotIndicator count={4} active={0} surface="dark" />
<!-- a parent listens for jumps -->
<script>
el.querySelector('[data-dots]')
.addEventListener('dot:select', (e) => goTo(e.detail));
</script>Rules
Do
Use it for a small, known set — a handful of slides.
Pair it with arrows for a carousel; dots show position.
Don't
Use dots for dozens of items — that's a scrollbar or count.
Use it for progress through a task — that's a Progress bar.