Skip to main content

StatusDot

A small coloured dot used to communicate status at a glance.

When to use it​

Use a StatusDot to indicate the status of an item in a compact way — for example, next to a list item to show it's online, active, or in error. Set pulse to true to animate a repeating radial ripple for live/active states.

Import​

import 'package:catalyst_ui/catalyst_ui.dart';

Usage​

StatusDot(tone: StatusTone.success, pulse: true)
StatusDot(tone: StatusTone.custom(Color(0xFF9333EA)))

Parameters​

ParameterTypeDefaultDescription
toneStatusTonerequiredThe colour tone.
pulseboolfalseWhether to animate a repeating ripple effect.

Tones​

Built-in StatusTone presets:

  • StatusTone.success — green; healthy or successful.
  • StatusTone.warning — amber; cautionary or pending.
  • StatusTone.danger — red; error or critical.
  • StatusTone.info — blue (brand); informational.
  • StatusTone.neutral — grey; inactive or unknown.

For a one-off colour, use the StatusTone.custom factory:

StatusDot(tone: StatusTone.custom(const Color(0xFF9333EA)))

Define your own by subclassing StatusTone and implementing resolve:

class LiveTone extends StatusTone {
  const LiveTone();

  @override
  StatusToneStyle resolve(ColorScheme cs) =>
      StatusToneStyle(color: const Color(0xFFFF0000));
}

See Variants & Tones for the full pattern.