Avatar

Displays text that represents the initials of a user.
A
Properties
variant
size
children
image
Update image
square
Example
Source Code
Installation
"use client";

import React from "react";
import { Avatar } from "@/subframe/components/Avatar";

function AvatarExample() {
  return (
    <Avatar
      variant="brand"
      size="medium"
      image="https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/fychrij7dzl8wgq2zjq9.avif"
      square={false}
    >
      A
    </Avatar>
  );
}

export default AvatarExample;

Props

Avatar
Prop
Type
Default
Additional info
variant
"brand" | "neutral" | "error" | "success" | "warning"
"brand"
size
"x-large" | "large" | "medium" | "small" | "x-small"
"medium"
children
string
"A"
image
string
"https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/fychrij7dzl8wgq2zjq9.avif"
square
boolean
false

Examples

Colors

Sizes

Image

Square