import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference"

export const metadata = { title: Avatar, }

{metadata.title}

A component for displaying user avatars with a fallback option.

In this guide, you'll learn how to use the Avatar component.

Usage

import { Avatar } from "@medusajs/ui"

<Avatar
  src="https://avatars.githubusercontent.com/u/10656202?v=4"
  fallback="M"
/>

API Reference

Examples

Avatar Variants

Avatar Sizes

Avatar Fallback Only

Avatar Custom Styling

Avatar Accessibility

You can add the aria-label prop to the Avatar component for better accessibility.