Avatar
Avatar component is used to display user's profile picture or initials or icons along with badges.
Imports
import {
Avatar,
AvatarDefaultStatusIndicators,
AvatarIcon,
AvatarImage,
AvatarInitials,
useAvatarProps,
useAvatarState,
AvatarStatusIndicator,
AvatarWrapper,
} from "@renderlesskit/react-tailwind";💡
A complex component that supports customization as per the composition guide.
Usage
Avatar sizes
Sizes can be set using the size prop. The default size is xl. The available
sizes are: xs sm md lg xl 2xl 3xl
Avatar styles
Avatar comes in two styles, rounded & squared
Avatar fallbacks
If there is an error loading the src of the avatar, there are 2 fallbacks:
- If there's a name prop, we use it to generate the initials.
- If there's no name prop, we use a default avatar.
If both name and src are not provided you can pass a icon prop to show any
content, icon has the lowest priority thus if name or src is provided fallback
will be ignored.
Avatar with status indicators
You can show status icons at the right corner of the Avatar using status prop.
Each avatar sizes has its own status indicators sizes.
API Reference
Prop | Type | Default |
|---|---|---|
src | string | - |
name | string | - |
circular | boolean | true |
size | union | xl |
status | union | none |
icon | React.ReactNode | - |
statusIndicators | React.ReactNode | - |
showRing | boolean | false |
ringColor | string | ring-white |
getInitialsFromName | string | - |
parentsBackground | string[] | ["bg-white", "ring-white"] |
Last updated on July 18, 2022