30:[] 2e:{"title":"Button Input / Observable Inputs","cells":[{"id":0,"value":"

Button Input / Observable Inputs

\n\n# Input: Button\n\nA Button emits an *input* event when you click it. Buttons may be used to trigger the evaluation of cells, say to restart an animation.","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"md`For example, below is an animation (using [yield](/@observablehq/introduction-to-generators)) that progressively hides a bar. The progress cell references replay, so it will run automatically whenever the replay button is clicked. If you click the button while the animation is still running, the animation will be interrupted and restart from the beginning.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"progress = {\n replay;\n const width = 360;\n const height = 20;\n const context = DOM.context2d(width, height);\n context.canvas.style.border = \"solid 1px black\";\n for (let i = width; i >= 0; --i) {\n context.clearRect(0, 0, width, height);\n context.fillRect(0, 0, i, height);\n yield context.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`You can also use buttons to count clicks. While the value of a button is often not needed, it defaults to zero and is incremented each time the button is clicked.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof clicks = Inputs.button(\"Click me\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"clicks","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`You have clicked ${clicks.toLocaleString(\"en\")} times.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`You can change this behavior by specifying the *value* and *reduce* options: *value* is the initial value, and *reduce* is called whenever the button is clicked, being passed the current value and returning the new value. The value of the button below is the last time the button was clicked, or null if the button has not been clicked.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof time = Inputs.button(\"Update\", {value: null, reduce: () => new Date})","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"time","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`Note that even if the value of the button doesn’t change, it will still trigger any cells that reference the button’s value to run. (The Observable runtime listens for *input* events on the view, and doesn’t check whether the value of the view has changed.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`For multiple buttons, pass an array of [*content*, *reduce*] tuples. For example, to have a counter that can be incremented, decremented, and reset:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"viewof counter = Inputs.button([\n [\"Increment\", value => value + 1],\n [\"Decrement\", value => value - 1],\n [\"Reset\", value => 0]\n], {value: 0, label: \"Counter\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"counter","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`The first argument to Button is the contents of the button. It’s not required, but it’s strongly encouraged.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"viewof x = Inputs.button()","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`The contents of the Button can be an HTML element if desired, say for control over typography.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof y = Inputs.button(html`Fancy`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`Like other basic inputs, buttons can have an optional label, which can also be either a text string or an HTML element.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"viewof confirm = Inputs.button(\"OK\", {label: \"Continue?\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"confirm ? md`Confirmed!` : md`Awaiting confirmation…`","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"You can also use a button to copy something to the clipboard.","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"Inputs.button(\"copy to clipboard\", {value: null, reduce: () => navigator.clipboard.writeText(time)})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}