bellhop by actabl

When to use

Use badge dots for simple status indicators that don't require text or numbers.

Status Indicators

Show online/offline status, availability, or connection state.

Notification Badges

Indicate unread items or new activity without specific counts.

State Indicators

Display system states like active, idle, busy, or error conditions.

When not to use

  • When a simpler component would accomplish the same goal with less complexity
  • For use cases that don't match the component's intended purpose
  • When the pattern doesn't fit your specific user experience needs
  • If accessibility or usability would be compromised in your context

Colors

Four semantic colors for different status types.

Success - Positive states, online, active
Error - Offline, critical, failed states
Warning - Needs attention, away, busy
Blue - Informational, neutral status

Sizes

Three sizes for different contexts.

Small
Medium
Large

Best Practices

Follow these guidelines when using badge dots.

Do

  • Use semantic colors consistently (green=success, red=error)
  • Place near related content (avatars, list items, icons)
  • Add tooltips or labels for clarity
  • Use for binary or simple states
  • Keep positioning consistent across similar elements

Don't

  • Don't use without context or explanation
  • Don't rely solely on color (add text for accessibility)
  • Don't use for complex status with multiple states
  • Don't place too far from related content
  • Don't use when specific numbers/text would be clearer

Availability

Badge Dot is available across all our supported frameworks.

React

Available View in Storybook →

Angular

Available View in Storybook →

Web Components

Available View in Storybook →