This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Avatar

Version: 0.134.0

Avatar

This component creates a user's avatar from a label, by showing the label's first letter capitalized in the center.

Usage

import { Avatar } from '@vtex/admin-ui'

function Example() {
return <Avatar label="Label" />
}

Examples

Palette

The Avatar can be rendered in multiple palettes, this means that the color and background-color properties change according to its palette property value. It has lightBlue value by default.

Loading...

Props

It also accepts all the props of a div JSX element.

NameTypeDescriptionRequiredDefault
labelstringString that will have its first letter capitalized-
palettelightBlue, green, orange, cyan, purple, teal or greyAvatar theme🚫lightBlue
csxStylePropDefines component styles🚫{}