@hig/avatar

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}
/>