UNPKG

@wix/design-system

Version:

@wix/design-system

www.wixdesignsystem.com

75 lines (71 loc) • 3.15 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
67
68
69
70
71
72
73
74
75
### 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" | "standard-light" - description: Specifies the skin of a button ### underline - type: "none" | "always" | "onHover" - description: Specifies whether to display and when to display an underline below button label ### weight - type: "bold" | "normal" | "thin" - description: Controls the font weight of button label ### size - type: "tiny" | "small" | "medium" - description: Controls the size of a button ### 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 ### fluid - type: boolean - description: Stretches button to fill a 100% of its parent container width ### 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. ### 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. ### ariaLabel - type: string - description: Defines a string value that labels the button element to screen reader users ### ariaLabelledBy - type: string - description: Identifies the element that labels the button element ### ariaHaspopup - type: string - description: Indicates to screen reader users whether an interactive popup element, such as menu or dialog, can be triggered by a button ### ariaExpanded - type: boolean - description: Indicates to screen reader users whether the collapsible content below is in the expanded or in the collapsed state ### ariaControls - type: string - description: Identifies the element whose contents or presence are controlled by the button ### ariaActiveDescendant - type: string - description: Identifies the element that represents the currently active descendant of the button ### as - type: "button" - description: Renders component as any other component or a given HTML tag. ### wrap - type: false - description: Enables wrapping when text is longer than its parent container. Cannot be used with as="button"