WUI logo

Avatar

The Avatar component displays a user's profile picture or initials in a circular or square format. It helps create a personalized and recognizable interface element, representing users visually across different parts of the application.

Source@welcome-ui/avatar
OverviewProps
import * as React from 'react'
import { Avatar } from '@welcome-ui/avatar'


const Example = () => {
  return (
    <Avatar
      name="Welcome jungle"
      src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
    />
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/avatar
2

Import component:

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

Examples

Image

We use Shape component. You can use size from theme or override with w and h size.

Only text

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.

Shape

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

AccordionBadge