Skip to content
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Components/Avatars

Avatars

Avatars represent people (workspace admins, students, guardians) across Aggarly Platform. They support image and initials fallbacks, presence indicators, notification badges, and premium stacked groups with overflow and hover-expand behavior.

Default Avatars

Image and initials fallbacks, token-driven surfaces, and consistent sizing.

AAAggarly AdminSAStudent AThera avatar
Show code
Default (JSX)
import { Avatar } from "@/design-system/components/Avatar";

export function Example() {
  return (
    <div className="avatars-row">
      <Avatar name="Aggarly Admin" />
      <Avatar name="Student A" initials="SA" tone="primary" variant="soft" />
      <Avatar
        src="/assets/icons/thera-avatar-icon.svg"
        alt="Thera avatar"
        tone="secondary"
      />
    </div>
  );
}

Sizes + Shapes

Choose size for density; choose shape to match surface language (cards vs circles).

XXSSSMMMDLLGXXL22XLCCircleRRoundedSSquare
Show code
Sizes + shapes (JSX)
import { Avatar } from "@/design-system/components/Avatar";

export function Example() {
  return (
    <div className="avatars-row">
      <Avatar size="xs" name="XS" />
      <Avatar size="sm" name="SM" />
      <Avatar size="md" name="MD" />
      <Avatar size="lg" name="LG" />
      <Avatar size="xl" name="XL" />
      <Avatar size="2xl" name="2XL" />

      <Avatar name="Circle" shape="circle" tone="primary" variant="soft" />
      <Avatar name="Rounded" shape="rounded" tone="success" variant="soft" />
      <Avatar name="Square" shape="square" tone="danger" variant="soft" />
    </div>
  );
}

Variants + Tones

Variants control emphasis; tones align with semantic states. Styling is premium by default.

SSurfaceSSoftOOutlineSSolidGGlass
PPrimarySSuccessWWarningDDangerIInfo
Show code
Variants + tones (JSX)
import { Avatar } from "@/design-system/components/Avatar";

export function Example() {
  return (
    <div className="avatars-stack">
      <div className="avatars-row">
        <Avatar name="Surface" variant="surface" tone="neutral" />
        <Avatar name="Soft" variant="soft" tone="primary" />
        <Avatar name="Outline" variant="outline" tone="secondary" />
        <Avatar name="Solid" variant="solid" tone="success" />
        <Avatar name="Glass" variant="glass" tone="info" />
      </div>

      <div className="avatars-row">
        <Avatar name="Primary" tone="primary" variant="soft" />
        <Avatar name="Success" tone="success" variant="soft" />
        <Avatar name="Warning" tone="warning" variant="soft" />
        <Avatar name="Danger" tone="danger" variant="soft" />
        <Avatar name="Info" tone="info" variant="soft" />
      </div>
    </div>
  );
}

Status + Badges

Presence and notification badges are crisp, readable, and enterprise-safe.

OOnlineAAwayBBusyOOfflineA3AlertsThera!
Show code
Status + badges (JSX)
import { Avatar } from "@/design-system/components/Avatar";

export function Example() {
  return (
    <div className="avatars-row">
      <Avatar name="Online" status="online" tone="success" variant="soft" />
      <Avatar name="Away" status="away" tone="warning" variant="soft" />
      <Avatar name="Busy" status="busy" tone="danger" variant="soft" />
      <Avatar name="Offline" status="offline" tone="neutral" variant="soft" />

      <Avatar name="Alerts" badge={3} tone="primary" variant="soft" />
      <Avatar
        src="/assets/icons/thera-avatar-icon.svg"
        alt="Thera"
        badge="!"
        tone="danger"
        variant="soft"
      />
    </div>
  );
}

Interactive Avatars (Micro‑Animations)

Button/link semantics + enterprise hover/focus/press behavior. No JS required.

Show code
Interactive avatars (JSX)
import { Avatar } from "@/design-system/components/Avatar";

export function Example() {
  return (
    <div className="avatars-row">
      <Avatar as="button" interactive tone="primary" variant="soft" name="Clickable" initials="CL" />
      <Avatar as="button" interactive selected tone="success" variant="soft" name="Selected" initials="OK" />
      <Avatar as="button" interactive status="online" tone="info" variant="soft" name="Online" initials="ON" />
    </div>
  );
}

Ambient Motion (Optional)

Use sparingly for special cases (assistant/bot, attention-needed). Reduced-motion safe.

FLFloating!!AttentionUPOnline pulse
Show code
Animated avatars (JSX)
import { Avatar } from "@/design-system/components/Avatar";

export function Example() {
  return (
    <div className="avatars-row">
      <Avatar name="Floating" initials="FL" tone="secondary" variant="soft" animation="float" />
      <Avatar name="Attention" initials="!!" tone="danger" variant="soft" animation="pulse" />
      <Avatar name="Online pulse" initials="UP" tone="success" variant="soft" status="online" />
    </div>
  );
}

Avatar Groups

Stacked groups with overflow are ideal for care teams. Hover-expand is a premium enterprise pattern.

T1Workspace admin One
T2Workspace admin Two
SUSupervisor
ASAssistant
+1
SAStudent A
SBStudent B
PRWorkspace member
Show code
AvatarGroup (JSX)
import { Avatar, AvatarGroup } from "@/design-system/components/Avatar";

export function Example() {
  return (
    <div className="avatars-stack">
      <AvatarGroup ariaLabel="Care team" layout="stacked" max={4} size="md" separated expandOnHover>
        <Avatar name="Workspace admin One" initials="T1" tone="primary" variant="soft" />
        <Avatar name="Workspace admin Two" initials="T2" tone="secondary" variant="soft" />
        <Avatar name="Supervisor" initials="SU" tone="success" variant="soft" />
        <Avatar name="Assistant" initials="AS" tone="warning" variant="soft" />
        <Avatar name="Coordinator" initials="CO" tone="neutral" variant="soft" />
      </AvatarGroup>

      <AvatarGroup ariaLabel="Participants" layout="spaced" size="sm">
        <Avatar name="Student A" initials="SA" />
        <Avatar name="Student B" initials="SB" />
        <Avatar name="Workspace member" initials="PR" tone="info" variant="soft" />
      </AvatarGroup>
    </div>
  );
}

Interactive Demo (Client Component)

Real interaction (click, shift+click) lives in a client component for App Router compatibility.

Click avatar to toggle selection. Shift+Click cycles presence status.
Premium pattern: stacked group expands on hover.
T1Workspace admin One
T2Workspace admin Two
SUSupervisor
ASAssistant
+1
Show code
Interactive demo (JSX)
// src/app/[locale]/docs/components/avatars/_examples/InteractiveAvatarsExample.tsx
// "use client";
// Click: toggle selected. Shift+Click: cycle status.
// (See full file in project.)