Button
Buttons can be clicked on by the user to trigger actions.

Props:

Properties
Descriptions
Required
Default
buttonStyle
ButtonStyle.Primary- Purple background with white text. ButtonStyle.Secondary - Purple border with a white background and purple text.
ButtonStyle.Text - No outline, no background, purple text.
ButtonStyle.Primary
disabled
If true, the component is no longer interactive and is greyed out.
false
label
Text displayed in the component.
onClick
Callback function that executes when the component is clicked
size
ButtonSize.Large- Wider and taller. ButtonSize.Small - Thinner and shorter.
ButtonSize.Small
tooltip
Text that appears when hovering over the component.

Example

Buttons are often an extremely important element in a UI. In this example, we'll look at what different button sizes and types create for us in a Whisper.
A whisper with columns of buttons (Type: Primary, Secondary, Text) alternating by enabled/disabled and Large/Small.
Javascript
React
1
import { whisper } from '@oliveai/ldk';
2
import {
3
Direction,
4
JustifyContent,
5
ButtonSize,
6
ButtonStyle,
7
} from '@oliveai/ldk/dist/whisper';
8
9
export const buttonWhisper = async () => {
10
await whisper.create({
11
label: 'Buttons',
12
onClose: () => {},
13
components: [
14
{
15
type: whisper.WhisperComponentType.Box,
16
direction: Direction.Horizontal,
17
justifyContent: JustifyContent.SpaceBetween,
18
children: [
19
{
20
type: whisper.WhisperComponentType.Button,
21
disabled: false,
22
label: 'Label',
23
onClick: () => {},
24
size: ButtonSize.Large,
25
buttonStyle: ButtonStyle.Primary,
26
},
27
{
28
type: whisper.WhisperComponentType.Button,
29
disabled: false,
30
label: 'Label',
31
onClick: () => {},
32
size: ButtonSize.Large,
33
buttonStyle: ButtonStyle.Secondary,
34
},
35
{
36
type: whisper.WhisperComponentType.Button,
37
disabled: false,
38
label: 'Label',
39
onClick: () => {},
40
size: ButtonSize.Large,
41
buttonStyle: ButtonStyle.Text,
42
},
43
],
44
},
45
{
46
type: whisper.WhisperComponentType.Box,
47
direction: Direction.Horizontal,
48
justifyContent: JustifyContent.SpaceBetween,
49
children: [
50
{
51
type: whisper.WhisperComponentType.Button,
52
disabled: true,
53
label: 'Label',
54
onClick: () => {},
55
size: ButtonSize.Large,
56
buttonStyle: ButtonStyle.Primary,
57
},
58
{
59
type: whisper.WhisperComponentType.Button,
60
disabled: true,
61
label: 'Label',
62
onClick: () => {},
63
size: ButtonSize.Large,
64
buttonStyle: ButtonStyle.Secondary,
65
},
66
{
67
type: whisper.WhisperComponentType.Button,
68
disabled: true,
69
label: 'Label',
70
onClick: () => {},
71
size: ButtonSize.Large,
72
buttonStyle: ButtonStyle.Text,
73
},
74
],
75
},
76
{
77
type: whisper.WhisperComponentType.Box,
78
direction: Direction.Horizontal,
79
justifyContent: JustifyContent.SpaceBetween,
80
children: [
81
{
82
type: whisper.WhisperComponentType.Button,
83
disabled: false,
84
label: 'Label',
85
onClick: () => {},
86
size: ButtonSize.Small,
87
buttonStyle: ButtonStyle.Primary,
88
},
89
{
90
type: whisper.WhisperComponentType.Button,
91
disabled: false,
92
label: 'Label',
93
onClick: () => {},
94
size: ButtonSize.Small,
95
buttonStyle: ButtonStyle.Secondary,
96
},
97
{
98
type: whisper.WhisperComponentType.Button,
99
disabled: false,
100
label: 'Label',
101
onClick: () => {},
102
size: ButtonSize.Small,
103
buttonStyle: ButtonStyle.Text,
104
},
105
],
106
},
107
{
108
type: whisper.WhisperComponentType.Box,
109
direction: Direction.Horizontal,
110
justifyContent: JustifyContent.SpaceBetween,
111
children: [
112
{
113
type: whisper.WhisperComponentType.Button,
114
disabled: true,
115
label: 'Label',
116
onClick: () => {},
117
size: ButtonSize.Small,
118
buttonStyle: ButtonStyle.Primary,
119
},
120
{
121
type: whisper.WhisperComponentType.Button,
122
disabled: true,
123
label: 'Label',
124
onClick: () => {},
125
size: ButtonSize.Small,
126
buttonStyle: ButtonStyle.Secondary,
127
},
128
{
129
type: whisper.WhisperComponentType.Button,
130
disabled: true,
131
label: 'Label',
132
onClick: () => {},
133
size: ButtonSize.Small,
134
buttonStyle: ButtonStyle.Text,
135
},
136
],
137
},
138
],
139
});
140
}
141
Copied!
1
import { ReactWhisper } from '@oliveai/ldk';
2
import * as React from 'react';
3
import { ButtonStyle, ButtonSize, Direction, JustifyContent } from '@oliveai/ldk/dist/whisper';
4
5
6
const ButtonTest: React.FunctionComponent<Object> = (props) => {
7
return (
8
<oh-whisper label="Buttons" onClose={() => {}}>
9
<oh-box direction={Direction.Horizontal} justifyContent={JustifyContent.SpaceBetween}>
10
<oh-button
11
buttonStyle={ButtonStyle.Primary}
12
disabled={false}
13
label="Label"
14
onClick={() => {}}
15
size={ButtonSize.Large}
16
tooltip="toolTip"
17
/>
18
<oh-button
19
buttonStyle={ButtonStyle.Secondary}
20
disabled={false}
21
label="Label"
22
onClick={() => {}}
23
size={ButtonSize.Large}
24
tooltip="toolTip"
25
/>
26
<oh-button
27
buttonStyle={ButtonStyle.Text}
28
disabled={false}
29
label="Label"
30
onClick={() => {}}
31
size={ButtonSize.Large}
32
tooltip="toolTip"
33
/>
34
</oh-box>
35
<oh-box direction={Direction.Horizontal} justifyContent={JustifyContent.SpaceBetween}>
36
<oh-button
37
buttonStyle={ButtonStyle.Primary}
38
disabled={true}
39
label="Label"
40
onClick={() => {}}
41
size={ButtonSize.Large}
42
tooltip="toolTip"
43
/>
44
<oh-button
45
buttonStyle={ButtonStyle.Secondary}
46
disabled={true}
47
label="Label"
48
onClick={() => {}}
49
size={ButtonSize.Large}
50
tooltip="toolTip"
51
/>
52
<oh-button
53
buttonStyle={ButtonStyle.Text}
54
disabled={true}
55
label="Label"
56
onClick={() => {}}
57
size={ButtonSize.Large}
58
tooltip="toolTip"
59
/>
60
</oh-box>
61
62
<oh-box direction={Direction.Horizontal} justifyContent={JustifyContent.SpaceBetween}>
63
<oh-button
64
buttonStyle={ButtonStyle.Primary}
65
disabled={false}
66
label="Label"
67
onClick={() => {}}
68
size={ButtonSize.Small}
69
tooltip="toolTip"
70
/>
71
<oh-button
72
buttonStyle={ButtonStyle.Secondary}
73
disabled={false}
74
label="Label"
75
onClick={() => {}}
76
size={ButtonSize.Small}
77
tooltip="toolTip"
78
/>
79
<oh-button
80
buttonStyle={ButtonStyle.Text}
81
disabled={false}
82
label="Label"
83
onClick={() => {}}
84
size={ButtonSize.Small}
85
tooltip="toolTip"
86
/>
87
</oh-box>
88
<oh-box direction={Direction.Horizontal} justifyContent={JustifyContent.SpaceBetween}>
89
<oh-button
90
buttonStyle={ButtonStyle.Primary}
91
disabled={true}
92
label="Label"
93
onClick={() => {}}
94
size={ButtonSize.Small}
95
tooltip="toolTip"
96
/>
97
<oh-button
98
buttonStyle={ButtonStyle.Secondary}
99
disabled={true}
100
label="Label"
101
onClick={() => {}}
102
size={ButtonSize.Small}
103
tooltip="toolTip"
104
/>
105
<oh-button
106
buttonStyle={ButtonStyle.Text}
107
disabled={true}
108
label="Label"
109
onClick={() => {}}
110
size={ButtonSize.Small}
111
tooltip="toolTip"
112
/>
113
</oh-box>
114
</oh-whisper>
115
);
116
};
117
118
ReactWhisper.renderNewWhisper(<ButtonTest />);
119
Copied!
Copy link