Command Palette

Search for a command to run...

Components / Display

Avatar

படவுரு

Avatars represent a user or entity. They show a profile image with an accessible fallback to initials when the image is unavailable.

படவுருக்கள் பயனர் அல்லது நிறுவனத்தை குறிக்கின்றன.

With fallback initials

Component preview
Avatar stackபடவுரு அடுக்கு

Sizes

Component preview
Avatar sizesபடவுரு அளவுகள்

Anatomy

Structure

Anatomy

3 parts documented for implementation and review.

Component map
1

Container

கொள்கலன்required<span>

Circular clip mask that frames the image or fallback. Size controlled via Tailwind utility classes (h-10 w-10 for default). Uses overflow-hidden and rounded-full. For avatar stacks, apply negative margin (-space-x-2) and border-2 border-background on each avatar.

2

AvatarImage

படம்<img>

Profile photo that loads asynchronously. Hidden until the image is fully loaded to prevent broken-image flicker. Always set an alt attribute with the user's name — in Tamil for Tamil users: 'காவ்யாவின் சுயவிவர படம்'. Fills the container via object-cover.

3

AvatarFallback

பதிலீடுrequired

Visible when the image is unavailable or still loading. Typically shows 1–2 initial characters. For Tamil users, use Tamil initials — 'கா' for காவ்யா, 'மு' for முத்துக்குமார். Apply font-tamil for correct rendering. Background color should be a soft OKLCH pastel for visual differentiation across a group.

Tamil-specific guidance

  • Use Tamil initials for Tamil users — கா for காவ்யா, மு for முத்துக்குமார்.
  • Fallback background colours: use the brand palette or soft OKLCH pastels for differentiation.
  • Always provide a Tamil alt text on AvatarImage: காவ்யாவின் சுயவிவர படம்.
API

Props

3 props
src
Type
string
Default
-
Description
Absolute/relative URL for the display image.
alt
Type
string
Default
-
Description
Accessible description fallback text.
fallbackreq
Type
string
Default
-
Description
Bilingual string or letters shown when the image fails to load.

Best practices

Use Tamil initials for Tamil users
தமிழ் பயனர்களுக்கு தமிழ் தொடக்க எழுத்துகள் பயன்படுத்தவும்

Show Tamil initials in the fallback — 'கா' for காவ்யா — so Tamil users see their name represented correctly.

காவ்யாவுக்கு 'கா' என்று தமிழ் தொடக்க எழுத்தை காட்டவும் — பயனரின் பெயர் சரியாக பிரதிநிதித்துவப்படுத்தப்படும்.

Don't use English initials for Tamil names
தமிழ் பெயர்களுக்கு ஆங்கில தொடக்க எழுத்துகள் பயன்படுத்தாதே

Romanised initials like 'KA' for காவ்யா misrepresent the user and break the Tamil-first design principle.

காவ்யாவுக்கு 'KA' என்று ஆங்கிலத்தில் காட்டுவது தமிழ்-முதல் வடிவமைப்பு கொள்கைக்கு எதிரானது.

Always provide alt text on AvatarImage
AvatarImage-ல் எப்போதும் alt உரை வழங்கவும்

Set a descriptive alt attribute in Tamil for screen reader users — 'காவ்யாவின் சுயவிவர படம்'.

திரை வாசகர் பயனர்களுக்கு தமிழில் விளக்கமான alt உரை அமைக்கவும்.

Don't show stacked avatars without an overflow count
அடுக்கிய படவுருக்களை எண்ணிக்கை இல்லாமல் காட்டாதே

When more than 4–5 avatars are stacked, always show a '+N' overflow count so users know how many people are in the group.

4–5-க்கும் அதிகமான படவுருக்கள் அடுக்கப்படும்போது '+N' எண்ணிக்கை காட்டவும்.