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 fontSizeproperty.
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" |