WUI logo

Avatar

Allows user to get an avatar with initials as a fallback letter when have no image.

version

4.1.2

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.

<Avatar
name="Welcome jungle"
src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
size="sm"
/>
<Avatar src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4" name="Welcome jungle" />
<Avatar
src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
name="Welcome jungle"
size="lg"
/>
<Avatar
src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
name="Welcome jungle"
size="xl"
/>
<Avatar
src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
name="Welcome jungle"
size="xxl"
/>
<Avatar
src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
name="Custom"
w={130}
h={130}
color="warning.500"
fontSize={20}
/>

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.

<Avatar name="Welcome jungle" size="sm" />
<Avatar name="Welcome jungle" />
<Avatar name="Welcome jungle" size="lg" />
<Avatar name="Welcome jungle" size="xl" />
<Avatar name="Welcome jungle" size="xxl" />
<Avatar name="Custom" w={130} h={130} color="warning.500" fontSize={20} />

With shape square #

By default Avatar is a circle shape, change with property shape.

<Avatar
src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
name="Welcome jungle"
shape="square"
size="xxl"
/>
<Avatar name="Welcome jungle" shape="square" size="xxl" />

Properties #

NameType(s)DefaultRequired
color
string
SubPalette
getInitials
(name: string) => string
name
string
size
"sm"
"md"
"lg"
"xl"
"xxl"
src
string
shape
"circle"
"square"

Packages #

Dependencies #
Peer dependencies #

Previous

Accordion

Next

Badge