Avatar
Avatar component is used to display user's profile picture, initials or icons.
Imports
Usage
Avatar sizes
Avatar has 5 sizes xs sm md lg xl
Avatar with badge
By using AvatarBadge component you can show status icons at the right corner
of the Avatar.
Custom badge
You can also customize the badge, by providing <Avatar /> with children &
using AvatarContens, AvatarBadge components.
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 fallback prop to show any
content, fallback has the lowest priority thus if name or src is provided
fallback will be ignored.
AvatarGroup
AvatarGroup renders its children as a stack, and you can:
limitthe total number of amount rendered and truncating the excess ones.- adjust size of all the avatars inside the AvatarGroup equally via the
sizeprop.
API Reference
Avatar
Prop | Type | Default |
|---|---|---|
src | string | - |
name | string | - |
loading | union | - |
fallback | React.ReactNode | - |
showBorder | boolean | - |
borderColor | string | - |
getInitials | Function | - |
size | union | md |
status | union | - |
position | union | top-right |
AvatarGroup
Prop | Type | Default |
|---|---|---|
limit | number | - |
showBorder | boolean | - |
borderColor | string | - |
size | union | md |
AvatarBadge
Prop | Type | Default |
|---|---|---|
status | union | - |