Design System/Atoms/Avatar

Avatar

User representations with image, fallback, and optional status indicator.

When To Use

  • Use Avatar when information needs to be scanned quickly and compared across multiple rows, cards, or values.
  • Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
  • Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

  • Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
  • Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

  • Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
  • Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
  • Do not rely on color alone to communicate trend, status, or state in charts and metric cards.

Key Props / API

Props

size, status

Key exports

Avatar, AvatarImage, AvatarFallback, AvatarWithStatus

Example Code

import { Avatar, AvatarFallback, AvatarImage } from "@hilum/ui"

// size prop: "xs" | "sm" | "md" | "lg" | "xl"
<Avatar size="xs"><AvatarFallback>SP</AvatarFallback></Avatar>
<Avatar size="sm"><AvatarFallback>SP</AvatarFallback></Avatar>
<Avatar><AvatarFallback>SP</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>SP</AvatarFallback></Avatar>
<Avatar size="xl"><AvatarFallback>SP</AvatarFallback></Avatar>

Avatar

Sizes

xs · sm · md (default) · lg · xl

SPSPSPSPSP

Colored fallbacks

Color-coded for user identification

SPGLAPLMEC

Avatar · Status

Status indicator

online · away · busy · offline

KB
AM
LM
JD
EC