Skip to content

Avatar

Displays a user avatar at various sizes.

An Avatar displays a user image inside a circular container at one of several sizes. Provide a username for accessible alt text and an optional imageUrl for the picture.

Usage

Section titled “Usage”
import { Avatar } from '@workflowbuilder/ui';


function Example() {
  return <Avatar username="Ada Lovelace" imageUrl="/ada.png" size="large" />;
}

Props

Section titled “Props”
usernamerequired
Typestring

Provide to use it as alt of the image for better a11y

imageUrl
Typestring

Image URL

size
TypeSize
Default'extra-large'

Size of the circle container

CSS variables

Section titled “CSS variables”

Color

--wb-public-avatar-border-color
--wb-public-avatar-background-color

Size

--wb-public-avatar-border-size