UNPKG

@wix/design-system

Version:

@wix/design-system

www.wixdesignsystem.com

63 lines (59 loc) • 2.42 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
### 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`. ### placeholder - type: node - 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. ### imgProps - type: object - description: Accept all common `<img>` tag properties. ### ariaLabel - type: string - description: Defines a string that labels the current element in case where text label is not visible on the screen. ### title - type: string - description: Defines a standard HTML title attribute value. Applies it to the root element. ### onClick - type: func - description: Defines a click event handler. When defined, component will be clickable and will have a pointer cursor on hover. ### size - type: enum - description: Controls the size of an avatar. ### color - type: enum - 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. ### shape - type: enum - description: Controls the shape of the image. ### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. ### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests. ### presence - type: enum - description: Sets the presence status of an avatar. ### indication - type: node - description: Accept any content to render as an indication item. ### customIndication - type: node - 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). ### onIndicationClick - type: func - description: Defines a callback function which is called every time indication element is clicked. ### showIndicationOnHover - type: bool - description: Shows indication element on hover. ### loading - type: bool - description: Shows a loader on top of an avatar.