Avatar

Avatars represent people by displaying their initials over a unique marble gradient generated from their name. Hovering the avatar will show a tooltip with 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

By default, avatars render a unique marble gradient from the name using boring-avatars, with initials in a darker matching shade from the pastel brand color palette.

#Solid colors

Set gradient to false to render a solid-color initials avatar instead. The background and text colors are assigned semi-randomly based on the name.

#No name

When name is undefined, only the marble gradient is rendered without initials or a default icon. Each component instance gets a unique gradient that persists across rerenders.

When gradient is false and name is undefined, a default avatar icon is rendered instead, with a random solid color assigned per component instance.

#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.
gradient	true	boolean When `false`, renders a solid-color initials avatar instead of the default marble gradient from [boring-avatars](https://boringavatars.com/react). When `name` is `undefined`, only the gradient is rendered.