Avatar
Avatars are a visual representation of a customer's identity. These may be small thumbnails as part of a menu or more prominent, standalone elements on account and management views.
Initials are dynamically generated from the provided name and always rendered. This allows the initials to serve as a placeholder while the image is loading.
Read more about when and how to use the Avatar component on the internal wiki.
Getting started
Install the package
yarn add @hig/avatar @hig/theme-context @hig/theme-data
Import the component
import Avatar, { sizes } from '@hig/avatar';
Basic usage
<Avatar
name="David Gonzales"
size={sizes.LARGE_48}
/>
Custom CSS
Use the className
prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.