Avatars are a great way to represent people or specific objects within your app. They can render as:
When you supply a
src prop, the avatar will be be rendered with an
and some additional styles applied. For accessibility, you should also supply
alt prop. The image will also be updated to have
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.
Avatar component has a few pre-made colors available by default. You can
change the color by supplying the
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
If you are using
scssVariablesfile 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.