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 Notifications
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 from three different avatar shapes: round, round square, or square. Just use the shape prop with values: "circle", "rounded", or "square".

Avatar Sizes#

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

Using User Images#

Instead of an icon, you can display a user's image. Use the img prop and 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. You can show the user's status using the status prop with values: online, offline, away, or busy. You can also customize the status position with the statusPosition prop, which accepts values: bottom-left, bottom-right, top-left, or top-right.

Avatar Notifications#

You can use the avatar to indicate notifications for the user. Use the status prop with values: "online", "offline", "away", or "busy" and set the statusType prop to notification to display notification indicators.

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
bordered	Determines if the avatar has a border.	boolean	false
img	Path to the user's image	string	/avatar.png
size	Specifies the size of the avatar	xs sm md lg xl 2xl	md
shape	The shape of the avatar.	circle rounded square	square
stacked	Specifies if avatars should be stacked together.	boolean	false
status	Reflects the user's availability status.	away busy offline online	None
statusType	Specifies the type of status	dot notification	None
statusPosition	Specifies the position of the status indicator.	bottom-left bottom-right top-left top-right	bottom-right
totalNotification	Total number of notifications	number	99