Avatar

Avatars represent people by displaying their initials. Hovering the avatar will show a tooltip wih the full name.

#Example

#Usage

#Sizes

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

#Shapes

Avatars are circular by default. Set shape to square to render rounded-corner avatars. The corner radius scales with the avatar size.

#Secondary tip

A tip may be rendered in the tooltip. This can be used to prompt the use to action.

#Hiding the tooltip

The tooltip may be hidden if hideTooltip is true. This may be useful when a larger, container-level, tooltip is needed.

#Colors

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

#No name

When name is undefined, a default avatar icon will be rendered, and a random color will be assigned per component instance. This color persists across rerenders.

#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
tip	—	string Secondary text to show below the name in the tooltip
size	"md"	"sm" | "md" | "lg" The avatar size.
shape	"circle"	"circle" | "square" The avatar shape. Use `square` for rounded-corner avatars, typically to represent non-person entities.
hideTooltip	false	boolean Whether to hide the tooltip.