Skip to main content

Avatar
component

A component used for displaying user avatars, with image support and fallback initials for when the image fails to load. You can view the Storybook for more interactive examples.

Was this section helpful?

Avatar

import {Avatar, AvatarFallback, AvatarImage} from '@shopify/shop-minis-react'

export default function MyComponent() {
return (
<Avatar>
<AvatarImage src="https://example.com/avatar.png" alt="my-avatar" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)
}

Preview