Homecomponentsinformational

Avatar

A decorated photo of a person or business.

Use Avatar to show a visual representation of a user or business.

Image

Use the imageUrl property to provide the URL for the image.

A placeholder is shown if the image is not given.

Square
Round
Open in Playroom

Shape

Use the shape property to give shape to the avatar.

Square
Round
Open in Playroom

Size

Use the size property to control the size of the avatar.

Square
xlarge
large
medium
small
xsmall
Round
xlarge
large
medium
small
xsmall
Open in Playroom

Presence

Use the presence property to show the online status of the avatar. If there is no imageUrl, this property does not do anything.

Online
Offline
Open in Playroom

Premium

Use the premium property to indicate this is a premium user.

Premium
Premium
Premium
Premium
Open in Playroom

Unoptimized images

Use the unoptimized property to disable Next.js image optimization.

Examples

Avatar with textual information

A typical use of the Avatar is to display user name with it.

Whitney Warner

@wwarner98

Jemma Miles

@mileyrites
Open in Playroom

API

shape
Required
The shape of the avatar.
round
square
imageUrl
The source url of the image. Displays a placeholder if not given.
string
altText
The alt text for the image.
string
size
The size of the avatar.
medium
large
small
xlarge
xsmall
presence
Indicates a user's online status by showing a small icon on the avatar.
online
offline
premium
Indicates this is a premium user by showing a corresponding badge.
true
false
unoptimized
Disable next/image optimization.
true
false
data
An object with the data keys and values.
DataAttributeMap
Table of Contents
Image
Shape
Size
Presence
Premium
Unoptimized images
Examples
Avatar with textual information
API