Avatar

It’s more than a picture with curved corners. It’s a vibe, subtly revealing secrets. A cheeky peek into depth, grabbing more than just your gaze.

Basic

It ain't just a pic with curved corners, for real. It's the whole vibe, whispering secrets without a peep. A cheeky sneak into the deep, snatching more than your eyes can peep.

image 1IRimage 1image 2IRimage 2image 3IRimage 3image 4IRimage 4image 5IRimage 5

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

All these components are tight, so you gotta use 'em all together.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Avatar Initials

You can use the initials prop to display the initials of the user.

IRIR

Fallback

If the image fails to load, the avatar will fallback to the initials.

Shape

By default, the avatar is a circle. You can change it to a square by using the shape prop.

irsyadadlIRirsyadadl

Size

By default, the avatar is medium. You can change it to small, large or extra-large by using the size prop.

irsyadadl smallirsyadadl mediumirsyadadl large

Status

You can use the status prop to display a badge with the status of the user.

Avatar Group

You can use the AvatarGroup component to display a group of avatars.

image 1IRimage 1image 2IRimage 2image 3IRimage 3image 4IRimage 4image 5IRimage 5