Dot Indicator

Pagination dots and status indicators for carousels, sliders, and status displays

Dot Indicator

Versatile dot components for pagination, status indicators, and visual feedback.

Usage

import { DotIndicatorGroup, DotIndicator } from "@/components/ui/dot-indicator";

export default function Example() {
  return (
    <DotIndicatorGroup>
      <DotIndicator active />
      <DotIndicator />
      <DotIndicator />
    </DotIndicatorGroup>
  );
}

Components

DotIndicatorGroup

Container for multiple dot indicators with consistent spacing.

DotIndicator

Individual clickable dot for pagination navigation.

StatusDot

Non-interactive dot for displaying status with glassmorphic styling.

PaginationDots

Convenience component that renders a complete pagination control.

Props

DotIndicatorGroup Props

Prop	Type	Default	Description
variant	"default" | "compact" | "spacious"	"default"	Spacing between dots
orientation	"horizontal" | "vertical"	"horizontal"	Layout direction

DotIndicator Props

Prop	Type	Default	Description
variant	"default" | "subtle" | "muted"	"default"	Visual style
size	"xs" | "sm" | "default" | "lg"	"default"	Dot size
active	boolean	false	Whether dot is active
index	number	-	Index for accessibility label

StatusDot Props

Prop	Type	Default	Description
size	"sm" | "default" | "lg"	"default"	Dot size
status	"default" | "active" | "success" | "warning" | "error" | "info"	"default"	Status color

PaginationDots Props

Prop	Type	Default	Description
count	number	-	Total number of dots
activeIndex	number	-	Currently active dot index
onDotClick	(index: number) => void	-	Click handler
dotSize	DotIndicator["size"]	"sm"	Size of dots
dotVariant	DotIndicator["variant"]	"muted"	Variant of dots

Variants

Size Variants

// Extra small - 4px
<DotIndicator size="xs" />

// Small - 6px with square radius
<DotIndicator size="sm" />

// Default - 8px
<DotIndicator size="default" />

// Large - 12px
<DotIndicator size="lg" />

Visual Variants

// Default - 10% opacity
<DotIndicator variant="default" />

// Subtle - 5% opacity
<DotIndicator variant="subtle" />

// Muted - 25% opacity
<DotIndicator variant="muted" />

Examples

Pagination Control

import { useState } from "react";
import { PaginationDots } from "@/components/ui/dot-indicator";

export default function Carousel() {
  const [activeSlide, setActiveSlide] = useState(0);

  return (
    <PaginationDots
      count={5}
      activeIndex={activeSlide}
      onDotClick={setActiveSlide}
    />
  );
}

Status Indicators

import { StatusDot } from "@/components/ui/dot-indicator";

export default function StatusList() {
  return (
    <div className="flex items-center gap-4">
      <div className="flex items-center gap-2">
        <StatusDot status="success" />
        <span>Online</span>
      </div>
      <div className="flex items-center gap-2">
        <StatusDot status="warning" />
        <span>Away</span>
      </div>
      <div className="flex items-center gap-2">
        <StatusDot status="error" />
        <span>Offline</span>
      </div>
    </div>
  );
}

Vertical Orientation

<DotIndicatorGroup orientation="vertical">
  <DotIndicator active />
  <DotIndicator />
  <DotIndicator />
</DotIndicatorGroup>

Compact Spacing

<DotIndicatorGroup variant="compact">
  <DotIndicator size="xs" active />
  <DotIndicator size="xs" />
  <DotIndicator size="xs" />
</DotIndicatorGroup>

With Labels (Accessible)

<DotIndicatorGroup aria-label="Slide navigation">
  <DotIndicator index={0} active />
  <DotIndicator index={1} />
  <DotIndicator index={2} />
</DotIndicatorGroup>

Design Tokens

• Default Background: rgba(248, 248, 248, 0.1)
• Subtle Background: rgba(248, 248, 248, 0.05)
• Muted Background: rgba(248, 248, 248, 0.25)
• Active Background: var(--ui-text-primary)
• Status Success: #4ade80
• Status Warning: #fbbf24
• Status Error: #f87171
• Status Info: #60a5fa
• Border Radius: 50% (circular), 1px (sm size)

Accessibility

• Uses role="tablist" on group and role="tab" on dots
• aria-selected indicates active state
• aria-label auto-generated from index prop
• Keyboard navigation supported via native button behavior

Found In

• Bento2 - Chart coordinate indicators
• Bento14 - Carousel pagination
• Bento17 - Data point markers
• Bento19 - Step indicators
• Bento22 - Progress dots
• Bento23 - Chart markers
• Bento26 - Analytics indicators
• Bento27 - Status displays