VV
CNVV
SA
PVInstallation
Usage
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
<Avatar> <AvatarImage src="https://github.com/vinihvc.png" /> <AvatarFallback>VV</AvatarFallback> </Avatar>
Sizes
Use the size prop to change the size of the avatar.
Small
VVLarge
VVExamples
Custom Size
If you want to use a custom size, you can use the className prop to set the size.
VVAvatar Group
Use the <AvatarGroup /> to add a group of avatars.
VVSAPVIACustom Colors
You can customize the avatar fallback colors using the className prop.
With Status
Use <AvatarBadge /> to show status indicators on avatars.
VVSAPVFallback Only
You can use just the <AvatarFallback /> to display a icon or text.
Fallback with Icon
Use an icon inside <AvatarFallback /> when you have no image or initials.
Avatar Group Count
Use <AvatarGroupCount /> to add a count to the group.
VVSAPVIAAvatar Group Count Icon
You can also add an icon to the <AvatarGroupCount />
VVSAPVIAAvatar with Popover
You can use with the <Popover> to add show more information.
VVSAPVIAAvatar with Hover Card
You can use with the <HoverCard> to show user information on hover.
API Reference
Avatar
Root element of the avatar. Renders a div
| Prop | Type | Default |
|---|---|---|
size | sm, md, lg | md |
className | string | - |
AvatarImage
Image element for the avatar. Renders an img
| Prop | Type | Default |
|---|---|---|
className | string | - |
AvatarFallback
Fallback content displayed when the image fails to load. Renders a div
| Prop | Type | Default |
|---|---|---|
className | string | - |
AvatarGroup
Container for grouping multiple avatars. Renders a div
| Prop | Type | Default |
|---|---|---|
className | string | - |
AvatarGroupCount
Element for displaying a count in avatar groups. Renders a div
| Prop | Type | Default |
|---|---|---|
className | string | - |
AvatarBadge
Badge element displayed on the avatar. Renders a span
| Prop | Type | Default |
|---|---|---|
variant | success, warning, destructive | success |
className | string | - |
For a complete list of props, see the Ark UI documentation.