Activity dot

Playground

'use client';
import { ActivityDot, type ActivityDotState } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "state": "active"
  };
  return (
    <div style={{ transform: 'scale(2)' }}>
      <ActivityDot
        state={settings.state as ActivityDotState}
        label={
          settings.state === 'active'
            ? "Active"
            : "Idle"
        }
      />
    </div>
  );
}

Properties

State

Usage

ActivityDot shows active and idle states. Set the state from your app's activity data.

'use client';
import { ActivityDot } from '@mbsw/ui';

export default function Example() {
  return <ActivityDot state="active" label={"Active"} />;
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

ActivityDot