Data Display
Avatar
An image element with a fallback for representing the user.
Import
import {
Avatar,
AvatarLabelGroup,
AvatarCompanyIcon,
AvatarAddButton,
AvatarProfilePhoto,
} from "@countryclub/ui-react";Default
Sizes
Six sizes via the "size" prop, from "xs" to "2xl".
Initials
Text fallback when no image is provided.
Placeholder
Default icon fallback without an image or initials.
Status
An online/offline presence dot in the corner.
Verified
A verified tick anchored to the avatar.
Company Badge
A company logo badge via the "badge" prop.
Label Group
An avatar paired with a title and subtitle.
Avatar Group
An overlapping stack with an overflow count and an add button.
Profile Photo
A ring-framed profile photo in three sizes with a verified tick.
Profile Photo Initials
The profile photo's text fallback via the "initials" prop.
Profile Photo Placeholder
The profile photo's icon fallback when no image is set.
Profile Photo Initials
The profile photo falling back to initials.