Avatar
1
2
3
4
5
6
7
8
9
10
11
12
import React from "react"
import { Avatar } from "@creation-ui/react"
export const Example = () => (
<Avatar
size={"md"}
variant={"circle"}
src={
"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
}
/>
)
Custom size avatar
Use size prop to set custom size of avatar in pixels.
10px
20px
30px
40px
50px
60px
100px
AvatarGroup
The AvatarGroup component is used to display a group of avatars.
with max property
The max property limits the number of avatars displayed. The remaining avatars are represented by a +{number} avatar.
Also in this example surplusClassName property was useed to add custom styles to the +{number} avatar.
with total property
The total property is used to display the total number
of avatars. The remaining avatars are represented by a +{number} avatar.
Component API
| Prop | Default | Description |
variant | circle | circle | rounded | squareThe shape of the avatar. |
size | md | sm | md | lg | numberThe size of the avatar. |
src | — | string | nullThe source of the avatar image. |
alt | — | stringThe alt text of the avatar. |
badge | null | objectThe badge of the avatar. |
| Prop | Default | Description |
total | 0 | numberManually controls the count displayed in last Avatar. |
max | — | numberAmount of avatars to display. Surplus will be rendered as count in an extra (last) Avatar. |
children | — | ReactNodeAvatars. |
size | md | sm | md | lg | numberThe size of the avatars and counter. |
offsetMultiplier | -0.3 | numberMultiplier for the offset of Avatars. Controls the overlap. |
className | — | stringContainer |
surplusClassName | — | string
|
renderSurplus | — | (surplusCount: number) => ReactNodeCustom render function for surplus displaying Avatar (counter). |