Avatars are a great way to represent people or specific objects within your app. They can render as:

• an image
• text content
• icon

When you supply a src prop, the avatar will be be rendered with an <img> tag and some additional styles applied. For accessibility, you should also supply the alt prop. The image will also be updated to have role="presentation" since screen readers normally don't need to be notified for these sort of things and can become a nuisance when there is a giant list of avatars.

The Avatar component has a few pre-made colors available by default. You can change the color by supplying the color prop.

This example also shows how you can use one of the special exports from each package to get the some variable names from SCSS in js using the scssVariables from the dist folder.

If you are using Typescript, the scssVariables file will be fully typed as well! So you won't have to worry about guessing what variable is what and it'll error if you try to use an invalid value.