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.

Name	Type	Description	Required	Default
label	string	String that will have its first letter capitalized	✅	-
palette	lightBlue, green, orange, cyan, purple, teal or grey	Avatar theme	🚫	lightBlue
csx	StyleProp	Defines component styles	🚫	{}