Avatar

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

version

4.2.0

install

yarn add @welcome-ui/avatar

usage

import { Avatar } from '@welcome-ui/avatar'

View package View source

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 #

Name	Type(s)	Default	Required
color	string SubPalette
getInitials	(name: string) => string
name	string
size	"sm" "md" "lg" "xl" "xxl"
src	string
shape	"circle" "square"

Packages #

Dependencies #

@welcome-ui/box [^4.2.0]

@welcome-ui/shape [^4.2.0]

@welcome-ui/system [^4.2.0]

@welcome-ui/text [^4.2.0]

Peer dependencies #

@xstyled/styled-components [^3.6.0]

react [^16.10.2 || ^17.0.1 || ^18.0.0]

styled-components [^5.3.3]

Accordion

Badge