Avatar

A basic avatar component. Use avatars to visually represent entities in your product, for example people, tokens, currency and companies.
Import component
import { Avatar } from "rimble-ui";

Examples

Different ways to use the Avatar component
Standard avatar
Standard with image
Custom size
Large
Medium
Small

Props

Prop NameTypeIs RequiredDefault ValueDescription
altstringoptional
'Avatar'
Sets alt attribute on image for accessibility
sizestringoptional
'2rem'
Sets avatar height and width
srcstringrequirednoneSets avatar image
themeobjectoptionalnoneSets theme
bgoptional
'grey'
Styled System Props
Avatar uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.

Design guidelines

Some best practice for using Avatar in your product.
Use with labels
Labels will help solidify the relationship between the entity and the avatar. This will also make your product more accessible to those using assistive technologies.
Do
DAI
Don't
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute