#WorkingBadge

Three dots, pulsing out of phase, for an avatar whose agent is busy.

import { AgentAvatar, WorkingBadge } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo">
      {[
        { id: 'ada', name: 'Ada' },
        { id: 'grace', name: 'Grace' },
      ].map((agent) => (
        <span key={agent.id} style={{ position: 'relative', display: 'inline-flex' }}>
          <AgentAvatar agent={agent} sizePx={44} state="working" />
          <span style={{ position: 'absolute', bottom: -2, insetInlineEnd: -4 }}>
            <WorkingBadge />
          </span>
        </span>
      ))}
      <span className="site-demo__cell">
        <WorkingBadge sizePx={14} />
        <span className="site-demo__label">sizePx 14</span>
      </span>
    </div>
  );
}

#Why not a spinner

A spinner says "loading" — something is on its way to you. Three dots say "working" — the agent is doing something, and you may carry on. The staggered delay is what makes them read as a process rather than as one blinking element: the eye follows the bright dot travelling along the row. Started in phase, the same three dots look like a warning light.

Each dot starts with a negative animation delay so the badge is already mid-cycle on its first frame instead of opening with all three at full brightness.

#Where it goes

Beside the AvatarStatusDot in purpose, in the same corner in practice: a presence dot says whether the agent is here, the badge says whether it is busy, and an avatar that showed both at once would have nowhere to put the second. In a roster, pair it with a working status tone rather than stacking the two.

#Accessibility

The badge is an img named by the locale's avatar.working (or label), not a live region. The state does not change while it is on screen, so announcing it once when it appears is both enough and all a reader wants.

#API

#Next

• Badges and status — unread counts and status dots
• Agent roster — twenty faces down the side