Avatar

User avatar with image, fallback, badge, and group layout

With Fallback

Usage

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@tryvienna/ui'

<Avatar>
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Examples

With Fallback

With Fallback

<Avatar>
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

All Sizes

All Sizes

<div className="flex items-center gap-4">
  <Avatar size="sm">
    <AvatarFallback>S</AvatarFallback>
  </Avatar>
  <Avatar size="default">
    <AvatarFallback>M</AvatarFallback>
  </Avatar>
  <Avatar size="lg">
    <AvatarFallback>L</AvatarFallback>
  </Avatar>
</div>

With Badge

With Badge

<div className="flex items-center gap-4">
  <Avatar size="sm">
    <AvatarFallback>SM</AvatarFallback>
    <AvatarBadge />
  </Avatar>
  <Avatar>
    <AvatarFallback>MD</AvatarFallback>
    <AvatarBadge />
  </Avatar>
  <Avatar size="lg">
    <AvatarFallback>LG</AvatarFallback>
    <AvatarBadge />
  </Avatar>
</div>

Group

Group

<AvatarGroup>
  <Avatar>
    <AvatarFallback>A</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>B</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>C</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

API Reference

Avatar

Prop	Type	Default	Description
size	"default" | "sm" | "lg"	default

Also accepts all props from AvatarPrimitive.Root.

AvatarImage

Also accepts all props from AvatarPrimitive.Image.

AvatarFallback

Also accepts all props from AvatarPrimitive.Fallback.

AvatarBadge

Also accepts all props from span.

AvatarGroup

Also accepts all props from div.

AvatarGroupCount

Also accepts all props from div.

Data Attributes

Component	data-slot
Avatar	"avatar"
AvatarImage	"avatar-image"
AvatarFallback	"avatar-fallback"
AvatarBadge	"avatar-badge"
AvatarGroup	"avatar-group"
AvatarGroupCount	"avatar-group-count"