🎉 Percept UI is released. Read more →
Beta
docs
Components
Avatar

Avatar

Profile picture, user initials and fallback icon.

View source

Report an issue

A
X
<div className="flex gap-2 p-2">
  <Avatar
    fallback="A"
    size={3}
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNZxgO3RRjNRzwjBJWqI-i9GGQmxCeO0Gy4CYhNN62cUK1FZLvz3X_txIxtCgmBw6mqK4&usqp=CAU"
  />
  <Avatar size={3} fallback="X" />
</div>

API References

PropTypeDescriptionDefault
variant"solid" | "outline" | "soft"Form of the Avatarsolid
size{1} | {2} | {3} | {4} | {5}Size of the Avatar (x:x)3
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--

Examples

Size

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

A
A
A
A
A
<div className="flex gap-2 p-2">
  <Avatar
    size={1}
    fallback="A"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNZxgO3RRjNRzwjBJWqI-i9GGQmxCeO0Gy4CYhNN62cUK1FZLvz3X_txIxtCgmBw6mqK4&usqp=CAU"
  />
  <Avatar
    size={2}
    fallback="A"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNZxgO3RRjNRzwjBJWqI-i9GGQmxCeO0Gy4CYhNN62cUK1FZLvz3X_txIxtCgmBw6mqK4&usqp=CAU"
  />
  <Avatar
    size={3}
    fallback="A"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNZxgO3RRjNRzwjBJWqI-i9GGQmxCeO0Gy4CYhNN62cUK1FZLvz3X_txIxtCgmBw6mqK4&usqp=CAU"
  />
  <Avatar
    size={4}
    fallback="A"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNZxgO3RRjNRzwjBJWqI-i9GGQmxCeO0Gy4CYhNN62cUK1FZLvz3X_txIxtCgmBw6mqK4&usqp=CAU"
  />
  <Avatar
    size={5}
    fallback="A"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNZxgO3RRjNRzwjBJWqI-i9GGQmxCeO0Gy4CYhNN62cUK1FZLvz3X_txIxtCgmBw6mqK4&usqp=CAU"
  />
</div>

Variant

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

A
A
A
<div className="flex gap-2 p-2">
  <Avatar size={3} variant="solid" fallback="A" />
  <Avatar size={3} variant="outline" fallback="A" />
  <Avatar size={3} variant="soft" fallback="A" />
</div>

Color

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

A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
<div className="flex gap-2 p-2">
  <Avatar color="blue" size={3} fallback="A" />
  <Avatar color="red" size={3} fallback="A" />
  <Avatar color="green" size={3} fallback="A" />
  <Avatar color="yellow" size={3} fallback="A" />
  <Avatar color="dark" size={3} fallback="A" />
  <Avatar color="cyan" size={3} fallback="A" />
  <Avatar color="gray" size={3} fallback="A" />
  <Avatar color="emerald" size={3} fallback="A" />
  <Avatar color="rose" size={3} fallback="A" />
  <Avatar color="amber" size={3} fallback="A" />
  <Avatar color="orange" size={3} fallback="A" />
  <Avatar color="pink" size={3} fallback="A" />
  <Avatar color="purple" size={3} fallback="A" />
  <Avatar color="indigo" size={3} fallback="A" />
  <Avatar color="teal" size={3} fallback="A" />
  <Avatar color="lime" size={3} fallback="A" />
  <Avatar color="sky" size={3} fallback="A" />
  <Avatar color="black" size={3} fallback="A" />
  <Avatar color="light" size={3} fallback="A" />
</div>

Radius

Use the radius prop to assign a specific radius value.

A
A
A
A
A
A
<div className="flex gap-2 p-2">
  <Avatar size={3} radius="none" fallback="A" />
  <Avatar size={3} radius="sm" fallback="A" />
  <Avatar size={3} radius="md" fallback="A" />
  <Avatar size={3} radius="lg" fallback="A" />
  <Avatar size={3} radius="xl" fallback="A" />
  <Avatar size={3} radius="full" fallback="A" />
</div>

Fallback

Use the fallback prop to modify the rendered fallback element.

A
AB
<div className="flex gap-2 p-2">
  <Avatar size={3} fallback="A" />
  <Avatar size={3} fallback="AB" />
  <Avatar
    size={3}
    fallback={
      <div className="w-8 h-8">
        <svg viewBox="0 0 64 64" fill="currentColor">
          <path d="M41.5 14c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S33 27.962 33 23 36.813 14 41.5 14zM56.289 43.609C57.254 46.21 55.3 49 52.506 49c-2.759 0-11.035 0-11.035 0 .689-5.371-4.525-10.747-8.541-13.03 2.388-1.171 5.149-1.834 8.07-1.834C48.044 34.136 54.187 37.944 56.289 43.609zM37.289 46.609C38.254 49.21 36.3 52 33.506 52c-5.753 0-17.259 0-23.012 0-2.782 0-4.753-2.779-3.783-5.392 2.102-5.665 8.245-9.472 15.289-9.472S35.187 40.944 37.289 46.609zM21.5 17c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S13 30.962 13 26 16.813 17 21.5 17z" />
        </svg>
      </div>
    }
  />
</div>
Getting StartedAlert