UNPKG

@wix/design-system

Version:

@wix/design-system

www.wixdesignsystem.com

66 lines (63 loc) • 2.69 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
### shape - type: "circle" | "square" - description: Controls the shape of the image. - default: 'circle' ### size - type: "size90" | "size72" | "size60" | "size48" | "size36" | "size30" | "size24" | "size18" - description: Controls the size of an avatar. - default: 'size48' ### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. - internal ### presence - type: "online" | "offline" | "busy" - description: Sets the presence status of an avatar. ### indication - type: ReactNode - description: Accept any content to render as an indication item. ### customIndication - type: ReactNode - description: Accept any content to render as a custom indication item. This indication element will not be wrapped by an IconButton. It could be rendered in other shapes (such as square). ### showIndicationOnHover - type: boolean - description: Shows indication element on hover. - default: false ### onIndicationClick - type: () => void - description: Defines a callback function which is called every time indication element is clicked. ### loading - type: boolean - description: Shows a loader on top of an avatar. ### ariaLabel - type: string - description: Defines a string that labels the current element in case where text label is not visible on the screen. ### color - type: "A1" | "A2" | "A3" | "A4" | "A5" | "A6" | "A7" - description: Controls the background color of the avatar. If not provided, color is determined by the provided text or name so that each name will receive a different color. ### imgProps - type: ImgHTMLAttributes<HTMLImageElement> - description: Accept all common `<img>` tag properties. ### name - type: string - description: Defines a name of the avatar user. Text initials will be generated from the name. The name value will be used as default value for HTML title and `aria-label` attributes. And also as default value for the image's alt attribute if `imgProps` is provided. ### text - type: string - description: Defines a text to render as a content instead of a given `name`. ### onClick - type: () => void - description: Defines a click event handler. When defined, component will be clickable and will have a pointer cursor on hover. ### placeholder - type: ReactNode - description: Accept any content to render as a content placeholder. This placeholder will be displayed if no text, name or imgProps are provided.<br> By default use a generic avatar user icon. ### title - type: string - description: Defines a standard HTML title attribute value. Applies it to the root element. ### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests.