Usage
JDJSBJ
Avatar
Avatar component displays user profile pictures or initials in a circular format.
Playground
Experiment with all the properties of the Avatar component in real time.
Properties
name
Name of the user (used for initials).
size
Size of the avatar.
animate
Enable hover animation.
JD
With Image
Provide an image URL using the src prop.
Sizes
Avatar supports five sizes: tiny, small, medium, large, and xlarge.
JDJDJDJD
With Animation
Enable hover animation using the animate prop.
JD
Avatar Group
Use Avatar.Group to display multiple avatars in a stacked layout.
Group with Max
Limit the number of visible avatars using the max prop. Remaining avatars will be shown as a count.
Group Sizes
Avatar groups also support different sizes.
Avatar Props
Props
Prop | Default | Type |
|---|---|---|
name | undefined | string |
src | undefined | string |
size | "medium" | "tiny" | "small" | "medium" | "large" | "xlarge" |
animate | false | boolean |
Avatar.Group Props
Props
Prop | Default | Type |
|---|---|---|
users | undefined | { name: string; src?: string }[] |
max | 5 | number |
size | "medium" | "tiny" | "small" | "medium" | "large" | "xlarge" |