Avatar

An avatar component is a UI element commonly used to represent a user or entity with a visual representation, usually in the form of a small image or icon. Avatars are often displayed alongside user profiles, comments, or other interactive elements in web or mobile applications.

Usage

Code Editor
Copy
import { Avatar } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { AvatarShapeProps, AvatarSizeProps } from '@erudilabs/alma'
AvatarShapeProps = 'circle' | 'square'
AvatarSizeProps = 'small' | 'medium' | 'large'

Component

Here preview and detail explain of Avatar component


Default



Shape

Prop allows you to specify the shape of the avatar. It can be set as circle for a circular avatar or rounded for a avatar with rounded corners.



Circle
Code Editor
Copy
<Avatar shape="circle" />

Square
Code Editor
Copy
<Avatar shape="square" />


Size

Prop determines the dimensions of the avatar, affecting its width, height, and padding. You can define different sizes



Small
Code Editor
Copy
<Avatar size="small" />

Medium
Code Editor
Copy
<Avatar size="medium" />

Large
Code Editor
Copy
<Avatar size="large" />

Props Reference

Prop
Type

testId?

string

src?

string

alt?

string

className?

string

shape?

AvatarShapeProps

size?

AvatarSizeProps