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

Github

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

Github

Placeholder

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

Github

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.

Github

Size

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

Github

Accordion Badge