Avatar
The Avatar
component is an image element with a fallback text for representing the user.
Preview
![Gravity avatar component](https://docs.usegravity.app/~gitbook/image?url=https%3A%2F%2F3357577683-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LlnrBGdA8s50Vnplq1j%252Fuploads%252FYzOY97x4w25RgfGjj4eB%252Favatar.png%3Falt%3Dmedia%26token%3D267440c1-aa7f-4924-a41e-5c0000c1bef3&width=768&dpr=4&quality=100&sign=633865c9&sv=1)
Usage
Props
Prop | Description | Required | Value |
---|---|---|---|
className | custom styles | optional | SCSS or Tailwind object |
fallback | Fallback text when image is not available | optional | string |
src | Image source URL | optional | string |
Notes
The
Avatar
component usesAvatarPrimitive.Root
,AvatarPrimitive.Image
, andAvatarPrimitive.Fallback
from@radix-ui/react-avatar
.Custom styles can be applied using the
className
prop.The
src
prop specifies the source URL for the avatar image.The
fallback
prop provides fallback content when the image is missing.For more details, refer to the Shadcn Avatar documentation.
Last updated