Avatar
Allows user to get an avatar with initials as a fallback letter when have no image.
version
5.0.0-alpha.32
install
yarn add @welcome-ui/avatar
usage
import { Avatar } from '@welcome-ui/avatar'
With image #
We use Shape
component. You can use size from theme or override with w
and h
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.
With shape square #
By default Avatar is a circle shape, change with property shape
.
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
color | any | ||
getInitials | (name: string) => string | ||
name | string | ||
size | "sm" "md" "lg" "xl" "xxl" | ||
src | string | ||
shape | "circle" "square" |