DocsComponents

Avatar

Avatar

Profile picture, user initials and fallback icon.

View source Report an issue

Start using via importing:

import { Avatar, AvatarImage, AvatarFallback } from "@perceptui/ui";
A
<Avatar radius="full">
  <AvatarImage src="https://images.pexels.com/photos/27269560/pexels-photo-27269560/free-photo-of-marti.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" />
</Avatar>
<Avatar radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>

API References

PropTypeDescriptionDefault
variant"solid" | "outline" | "soft"Form of the Avatarsolid
colorstringColor of the Avatarblue
radius"none"|"sm"|"md"|"lg"|"xl"|"full"Radius of the Avatarlg
srcstringLink of the image to be used in Avatar-
fallbackReactNode--
classNamestringclassName_

Examples

Variant

Use the variant prop to control the visual style of the avatar.

A
A
A
<Avatar variant="solid" radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>
<Avatar variant="soft" radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>
<Avatar variant="outline" radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>

Color

Use the color prop to control the color of the avatar.

A
A
A
A
A
A
<Avatar color="blue" radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>
<Avatar color="red" radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>
<Avatar color="green" radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>
<Avatar color="yellow" radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>
<Avatar color="dark" radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>
<Avatar color="cyan" radius="full">
  <AvatarFallback>A</AvatarFallback>
</Avatar>

There are more color properties. Take your time to explore

Radius

Use the radius prop to assign a specific radius value.

<Avatar radius="none">
  <AvatarImage src="https://images.pexels.com/photos/27269560/pexels-photo-27269560/free-photo-of-marti.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" />
</Avatar>
<Avatar radius="sm">
  <AvatarImage src="https://images.pexels.com/photos/27269560/pexels-photo-27269560/free-photo-of-marti.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" />
</Avatar>
<Avatar radius="md">
  <AvatarImage src="https://images.pexels.com/photos/27269560/pexels-photo-27269560/free-photo-of-marti.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" />
</Avatar>
<Avatar radius="lg">
  <AvatarImage src="https://images.pexels.com/photos/27269560/pexels-photo-27269560/free-photo-of-marti.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" />
</Avatar>
<Avatar radius="xl">
  <AvatarImage src="https://images.pexels.com/photos/27269560/pexels-photo-27269560/free-photo-of-marti.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" />
</Avatar>
<Avatar radius="full">
  <AvatarImage src="https://images.pexels.com/photos/27269560/pexels-photo-27269560/free-photo-of-marti.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" />
</Avatar>

Alert

Badge