UNPKG

@wix/design-system

Version:

@wix/design-system

www.wixdesignsystem.com

56 lines (52 loc) • 2.21 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
### disabled - type: boolean - description: Specifies whether user interactions are disabled. ### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. - internal ### children - type: ReactNode - description: Accepts any item as a child element. For all common cases pass a standard text string. ### onClick - type: MouseEventHandler - description: Defines a callback function which is called every time a button is clicked. ### skin - type: "standard" | "light" | "dark" | "destructive" | "premium" | "inverted" | "transparent" | "premium-light" | "ai" - description: Specifies the skin of a button. ### priority - type: "primary" | "secondary" - description: Specifies the priority of a button. ### size - type: "tiny" | "small" | "medium" | "large" - description: Controls the size of a button. - default: medium ### fullWidth - type: boolean - description: Sets button width to fill a 100% of a parent container width. ### suffixIcon - type: ReactElement - description: Pass an icon or a component to display at the end of a label (e.g., svg, image, etc.) ### prefixIcon - type: ReactElement - description: Pass an icon or a component to display at the front of a label (e.g., svg, image, etc.) ### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests. ### ellipsis - type: boolean - description: Specifies whether component handles text overflow with ellipsis. If enabled, label that exceed available space will be displayed inside of a tooltip when user hover over a button. ### internalDataHook - type: string - description: Applies internal dataHook for internal testkits - internal ### showTooltip - type: boolean - description: Specifies whether the full button label is displayed in a tooltip when label overflows available space. Behaviour is enabled by default. Set property value to false to show ellipsis without a tooltip. ### tooltipProps - type: TooltipCommonProps - description: Allows to pass all common tooltip props. Use it to customize a tooltip created from text ellipsis. ### as - type: "button" - description: Renders component as any other component or a given HTML tag.