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 EditorCopyimport { Avatar } from '@erudilabs/alma'
Types
Code EditorCopyimport 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 EditorCopy<Avatar shape="circle" />
Square
Code EditorCopy<Avatar shape="square" />
Size
Prop determines the dimensions of the avatar
, affecting its width
, height
, and padding
.
You can define different sizes
Small
Code EditorCopy<Avatar size="small" />
Medium
Code EditorCopy<Avatar size="medium" />
Large
Code EditorCopy<Avatar size="large" />
Props Reference
Prop
Type
Default
testId?
string
-
src?
string
-
alt?
string
-
className?
string
-
shape?
AvatarShapeProps
circle
size?
AvatarSizeProps
medium