Welcome UI 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
OverviewProps
import { Avatar } from 'welcome-ui/Avatar'


const Example = () => {
  return (
    <>
      <Avatar
        name="Welcome UI"
        src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80"
      />
      <Avatar name="Welcome UI" />
      <Avatar />
    </>
  )
}


export default Example

Examples

Image

Pass an image url with src="you-url".

Placeholder

If no image is provided and no name is given, we display a generic placeholder.

Text

If no image is provided we create a two-letter initial based on the name. We choose a random colour from secondaries theme colours for the background. For xsand sm sizes, we only display the first letter.

Size

You can use xs, sm, md and lg sizes.

AccordionBadge