Avatar - Keep React

The Avatar component in the Keep React allows you to display user avatars or profile images in a consistent and visually appealing manner. With customizable options for placeholders, shapes, status icons, and sizes, you can create versatile avatars to suit your design needs.

Table of Contents#

Default Avatar
Avatar Shapes
Avatar Sizes
Using User Images
Avatar Status
Avatar Group
API Reference

Default Avatar#

When you enable the placeholder option, a default avatar image appears when there's no user image available.

Avatar Shapes#

Choose between two avatar shapes: rounded and circle. Utilize the shape prop with values "circle" or "rounded".

Avatar Sizes#

There are various avatar sizes to fit your design. To change the size, use the size prop with values: "sm", "md", "lg", "xl", or "2xl".

Using User Images#

Display a user's image using the img prop. Provide the path to the user's image, whether it's a local or remote URL.

Avatar Status#

The avatar's status reflects the user's availability. Show the user's status using the "active" prop, and use the "verified" prop to indicate a verified status.

Avatar Group#

Display multiple avatars in a group setting. Customize the layout for visually appealing designs.

API Reference#

For detailed information about all the props and options, refer to the API section below.

Property	Description	Type	Default
alt	Alternative text for the avatar image.	string	avatar
img	Path to the user's image	string	/avatar.png
size	Specifies the size of the avatar	sm md lg xl 2xl	md
color	Specifies the color of the avatar	primary secondary success warning error	secondary
shape	The shape of the avatar.	circle rounded	circle
status	Reflects the user's availability status.	boolean	false
className	Injects the class name in avatar	string	None