Avatar

Avatar is a visual representation of a user in the interface.

Import#

import { Avatar } from '@volue/wave-react';

Avatar is a compound component that consists of multiple parts:

Avatar: The wrapper that contains all the parts of an avatar and provides context for its children.
Avatar.Image: The image that represents the user.
Avatar.Fallback: A container for a fallback content that should render when the image hasn't loaded or is unavailable.
Avatar.Initials: The initials of the user's name to render.
Avatar.Placeholder: The placeholder like an icon to render.

Examples#

With image#

Provide thumbnail image of a user whenever available. The image will only render when it has loaded. Whilst it's loading, the provided fallback will display.

You can optionally delay fallback rendering, by specifying delayMs prop. This may be useful to prevent content flashing and render pleceholder only for those with slower connections.

If the image is unavailable or if there was an error while loading it, only the fallback will display. You can choose to provide user name initials as a fallback or a dull human silhouette placeholder.

Just initials#

If you can't provide a user image, displaying initials is the best alternative. Note that no fallback is needed in that case.

Background and color of the initials is based on the user's name. This way the identity of a user feels more unique.

Size#

The Avatar component comes in medium and small sizes to accommodate different use cases. To adjust the size, pass size prop.

Colors#

Avatar.Initials picks color based on the user's name by default, but you can assign fixed color value with a color property.

Likewise, you can use color property to change Avatar.Fallback default color.

Clickable Avatar with popover#

You can compose the Avatar with a Popover to display extra information.

With indicators#

With help of Anchor component, you can decorate Avatar with Label or HintDot, to show presence indicators, notification count and alike.

API Reference#

Avatar#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`of`*	`string`	No default value
`size`	`enum`	`"medium"`

Avatar.Image#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`src`	`string`	`false`
`onLoadingStatusChange`	`function`	No default value

Avatar.Fallback#

Prop	Type	Default
`children`*	`React.ReactNode`	No default value

Avatar.Initials#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`color`	`enum`	`"auto"`

Avatar.Placeholder#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`color`	`enum`	`"neutral"`