Avatar - Keep React
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 |