Avatar

Avatars represent people by displaying their initials.

#Example

#Usage

#Sizes

Avatars have three available sizes, with the default set to md

#Colors

The avatar background and text colors will be automatically assigned, semi randomly based on the name.

#Guidelines

#When to use

• Represent a person nearby the content they're related to. For example, avatar could be placed near the source they created.
• As a purely visual element near the person's name.

#When not to use

• When representing anything else, but a person.

#Styling

If you want to vertically align the Avatar initials with text on the same line as the Avatar, the easiest way is to set the line height to match the Avatar's height. The avatar line heights are exported in theme variables.

Check the theme for specific line heights.

#Props

Inherits margin props.

Name	Default	Description
name	—	string | undefined User's full name
size	"md"	"sm" | "md" | "lg" The avatar size.