button
Something the person clicks. There are four kinds: button, primary button, secondary button and danger button. They behave the same and differ in how they look.
Syntax
Otter
create button into name
create primary button into name
create secondary button into name
create danger button into name
Properties
Output
text text What the control shows
width number Width in pixels
height number Height in pixels
background color Background color: a name ("navy") or a hex value ("#2563eb")
foreground color Text color, written the same way
align word left, center or right (rows and columns also accept top, middle, bottom)
Events
Output
clicked runs when the button is clicked (click means the same)
Example
Otter
clicks is 0
create window into app
title of app is "Counter"
create text into display
text of display is "0"
create primary button into addButton
text of addButton is "Add one"
create danger button into resetButton
text of resetButton is "Reset"
put display in app
put addButton in app
put resetButton in app
when addButton is clicked
increase clicks
text of display is clicks
.
when resetButton is clicked
clicks is 0
text of display is clicks
.
show app
Expected result
A window with the number 0 and two buttons. Add one raises the number; Reset sets it back to zero.
text
Events