Components
Avatar
Avatars are how we visually represent our users.
Appearance
The leaf is used when the avatar will represent a user working within Sprout.
The circle is used when the avatar will represent a user on social.
Common sizing
Sizes of avatars vary widely across the app. However, here are some known sizes and their usage.
| Size | Use |
|---|---|
20px | Commonly used as the avatar size in the compact . However, is seen across multiple densities. |
32px | Commonly used in small . |
40px | The default size, used in the large density. |
Color
We encourage users to display authenticity by using an image for their avatar, however in cases where the user does not provide an image we default to colors. While color overrides remain, it is strongly recommended that consumers utilize type and variant props accessible color palettes.