Avatar
Avatar component with initials letter when have no image.
Install and import
With image
We use Shape
component. You can use size from theme or override with width
and height
size.
Without image
Without image we add initials on the avatar with property name
. We get by default ramdom color from sub colors to create the background, based on the name string. You can override with color
. Font size is calculated automatically and can be override with fontSize
property.
WJ
WJ
WJ
WJ
WJ
CU
With shape square
By default Avatar is a circle shape, change with property shape
.
WJ
Properties
Name | Type(s) | Default | Required |
---|---|---|---|
color | string | ||
fontSize | string | number | ||
height | number | ||
name | string | ||
shape | circle square | circle | |
size | sm md lg xl xxl | md | |
src | string | ||
width | number |
Dependencies
- - @welcome-ui/box^2.0.2
- - @welcome-ui/shape^2.0.2
- - @welcome-ui/text^2.0.2
Peer dependencies
- - @xstyled/styled-components^1.17.0
- - @xstyled/system^1.17.0
- - react^16.10.2
- - react-dom^16.10.2
- - styled-components^4.0.0 || ^5.0.0