Public
Edited
Sep 20, 2023
Importers
Insert cell
# UI Library
Insert cell
ToggleButton = (
onClick,
offText = "Off",
onText = "On",
initialState = false
) => {
const node = html`<span><button>${
initialState ? onText : offText
}</button></span>`;
node.value = initialState;
const button = node.querySelector("button");
if (!onClick) {
throw new Error("onClick must be provided!");
}

const setValue = (newValue) => {
button.textContent = newValue ? onText : offText;
node.value = newValue;
node.dispatchEvent(new CustomEvent("input"));
};

button.addEventListener("click", function (e) {
const newValue = !node.value;
setValue(newValue);
onClick(newValue, setValue);
});

return node;
}
Insert cell
Insert cell
viewof button = ToggleButton(() => {})
Insert cell
button
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more