CleenUI · Media · Avatar

Avatar

Single user avatar with image, initials fallback, status indicator, and sizing.

storybook.cleenui.com
Open Storybook
Live preview

Interactive Avatar preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About Avatar

Avatar renders a user's identity. Pass a URL and you get an image avatar; if the image fails to load (or no URL is provided), the component falls back to colored initials computed from the user's name.

An optional status dot in the bottom-right corner shows presence (online, away, busy, offline). The component is fully accessible — name is exposed as the avatar's accessible label.

When to use it

  • User identity in headers and navigation.
  • Author bylines on posts and articles.
  • Assignee chips on tasks.
  • Profile previews in user-pickers.

Common props

Prop
Type
Description
src
string
Image URL.
name
string
User name (for initials fallback and a11y label).
size
"xs" | "sm" | "md" | "lg" | "xl"
Avatar size.
status
"online" | "away" | "busy" | "offline"
Presence indicator.
shape
"circle" | "square"
Avatar shape.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.