Avatar
A visual representation of a user or entity, typically displaying a profile picture or initials as a fallback.
Usage
import { Avatar } from "@rhinolabs/ui"
export default function AvatarDemo() {
return (
<Avatar>
<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
<Avatar.Fallback>CN</Avatar.Fallback>
</Avatar>
)
}
Examples
Basic Avatar
A simple avatar with an image and fallback text.
<Avatar>
<Avatar.Image src="https://github.com/shadcn.png" alt="User" />
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>
With Fallback
Avatar displaying fallback content when image fails to load.
<div className="flex gap-4">
<Avatar>
<Avatar.Image src="/broken-image.jpg" alt="User" />
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>
<Avatar>
<Avatar.Image src="/another-broken-image.jpg" alt="User" />
<Avatar.Fallback>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
</Avatar.Fallback>
</Avatar>
</div>
Custom Sizing
Avatars can be sized using CSS classes.
<div className="flex gap-4">
<Avatar className="h-6 w-6">
<Avatar.Image src="https://github.com/shadcn.png" alt="User" />
<Avatar.Fallback>S</Avatar.Fallback>
</Avatar>
<Avatar className="h-12 w-12">
<Avatar.Image src="https://github.com/shadcn.png" alt="User" />
<Avatar.Fallback>SM</Avatar.Fallback>
</Avatar>
</div>
Props
Avatar Props
The Avatar component accepts all standard HTML div attributes.
AvatarImage Props
Prop | Type | Description |
---|---|---|
src | string | The image source URL |
alt | string | Alternative text for the image |
The AvatarImage component also accepts all standard HTML img attributes.
AvatarFallback Props
The AvatarFallback component accepts all standard HTML div attributes.
Design Considerations
- Use appropriate image sizes to maintain quality
- Provide meaningful alt text for accessibility
- Keep fallback content concise (1-2 characters ideal)
- Maintain consistent sizing within your application
- Consider using initials or icons for fallback content
Accessibility
The Avatar component follows WAI-ARIA guidelines:
- Provides proper image alt text support
- Ensures fallback content is accessible
- Maintains good color contrast
- Supports keyboard navigation when interactive
Last updated on