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 hig website.
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}
/>
Styling
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.
Avatar also has a stylesheet
prop that accepts a function wherein you can modify its styles. For instance
import Avatar from '@hig/avatar';
function YourComponent() {
const customStylesheet = (styles, props, themeData) => ({
...styles,
avatarContainer: {
...styles.avatarContainer,
color: themeData["colorScheme.status.error"]
},
avatarImageWrapper: {
...styles.avatarImageWrapper,
opacity: 1
},
avatarImage: {
...styles.avatarImage,
padding: `4px`
},
avatarInitials: {
...styles.avatarInitials,
position: `static`
}
});
return (
<Avatar stylesheet={customStylesheet} />
);
}