Aora Bot
  • English

      • Badges and status

      Small pieces that sit on an avatar.

      194299+
      import { AgentAvatar, UnreadBadge, AvatarStatusDot } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo">
      {[1, 9, 42, 128].map((count) => (
        <span key={count} style={{ position: 'relative', display: 'inline-flex' }}>
          <AgentAvatar agent={{ id: `badge-${count}` }} sizePx={44} still />
          <span style={{ position: 'absolute', top: -4, insetInlineEnd: -8 }}>
            <UnreadBadge count={count} />
          </span>
        </span>
      ))}
    </div>
  );
}

      UnreadBadge

      Capped at 99+ so a runaway number cannot stretch the layout. The full count is still announced to assistive technology, so a reader is not told "ninety-nine plus" when the real number matters.

      PropTypeDefaultDescription
      count*number——
      classNamestring——
      styleCSSProperties——

      AvatarStatusDot

      online
      busy
      away
      offline
      working
      attention
      error
      info
      import { AgentAvatar, AvatarStatusDot } from '@aora-bot/react';

const tones = ['online', 'busy', 'away', 'offline', 'working', 'attention', 'error', 'info'] as const;

export default function Demo() {
  return (
    <div className="site-demo">
      {tones.map((tone) => (
        <div className="site-demo__cell" key={tone}>
          <span style={{ position: 'relative', display: 'inline-flex' }}>
            <AgentAvatar agent={{ id: tone }} sizePx={44} still />
            <span style={{ position: 'absolute', bottom: 0, insetInlineEnd: 0 }}>
              <AvatarStatusDot tone={tone} pulse={tone === 'busy'} />
            </span>
          </span>
          <span className="site-demo__label">{tone}</span>
        </div>
      ))}
    </div>
  );
}

      Eight tones. The first four are presence — online, busy, away, offline — and the other four are about the agent's work: working, attention, error, info. The two sets share one corner because an avatar that showed both at once would have nowhere to put the second; a roster shows whichever question matters on that screen.

      The dot carries a ring in the page background colour so it reads against the avatar behind it. ring adds an expanding halo on top; it defaults to on for working and attention, the two tones that are asking to be noticed, and off for the rest. Pass label when the status is not also stated in text — without one the dot is aria-hidden, since colour alone is not an accessible signal.

      PropTypeDefaultDescription
      classNamestring——
      labelstring——
      pulsebooleanfalseSlow pulse, for states that mean "something is happening".
      ringboolean—Expanding halo around the dot. Defaults to on for `working` and `attention`, which are the two tones that are asking to be noticed.
      styleCSSProperties——
      toneStatusTone'offline'—

      WorkingBadge

      Three pulsing dots for an agent that is busy, sized to sit in the same corner as the status dot. Pair it with a working status tone rather than stacking the two on one avatar — the component and its props are documented on WorkingBadge.

      Next