Avatar

Avatars represent people by displaying their initials.

#Example

#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 like var(--chakra-avatar-height-md).

Check the theme for specific line heights.

#Props

Inherits margin props.

Name	Default	Description
name	—	string | undefined User's full name
size	"md"	"2xs" | "xs" | "sm" | "md" | "lg" The avatar size. `xs` and `2xs` are deprecated and equivalent to `sm`