WLJS Notebook

InputButton[label_String, opts___] _EventObject

creates a button component and returns EventObject

Event generation

On-click emits True to a handler function assigned

Options

`"Class"`

A text string of CSS classes used for customizing a button

`"Style"`

An inline CSS style string applied to the button element

`"Topic"`

The default topic/pattern is "Default". Specifies an event-pattern used on emitting (see more on EventFire patterns topics)

`"StateExpression"`

Controls the button state using an expression evaluated on the frontend. This is useful for showing that an action is running or for disabling the button based on external state.

The expression can evaluate to:

"Disabled", "Off", or False to prevent button actions.
"Enabled", "On", or True to enable normal behavior.
"Busy" or "Progress" to prevent button actions and show a spinner.

Bind the state to an external symbol:

state = True;
InputButton["Run", "StateExpression" -> Offload[state]]

The button becomes disabled after evaluating:

state = False;

"StateExpression" can also derive the state from another frontend expression:

stateText = "Running";
TextView[stateText // Offload]
InputButton[
 "Run",
 "StateExpression" -> Offload[stateText =!= "Running"]
]

Whenever stateText changes, the button state is recomputed.

Not every Wolfram Language expression can be evaluated on the frontend. The frontend interpreter supports a limited set of basic symbols.

Application

A basic GUI element

button = InputButton["Click me!"];
EventHandler[button, Print]

or click to make sound

EventHandler[InputButton[], Beep]

Chaining events

One can reuse another event when creating a button

InputButton[event_EventObject, label_String, opts___]

for example

ev = EventObject[];

InputButton[ev, "Topic"->"Button"]
InputRange[ev, 0,1,0.1, "Topic"->"Slider"]

EventHandler[ev, {
	"Button" -> Beep,
	"Slider" -> Print
}];

Possible issues

Grouping two buttons using InputGroup

group = InputGroup[{
	InputButton[],
	InputButton[]
}] 

EventHandler[group, Print];

You will always see {True, True}. This is because buttons are stateless, and InputGroup records the last state of each. There are different ways to differentiate between them

Option 1A

By patterns

group = InputGroup[{
	InputButton["Topic"->"A"],
	InputButton["Topic"->"B"]
}] 

EventHandler[group, {
	topic_ :> Function[Null, Print[topic]]
}];

Option 1B

Using custom wrapper and separate by patterns

ev = EventObject[];

{
	InputButton[ev, "Topic"->"A"],
	InputButton[ev, "Topic"->"B"]
}// Column // Panel

EventHandler[ev, {
	any_ :> Function[Null, Print[any]]
}];

Option 2

Connect separately

{
	b1 = InputButton[],
	b2 = InputButton[]
}// Column // Panel

EventHandler[b1, (Print["A"])&];
EventHandler[b2, (Print["B"])&];

InputButton