Buttons

A button calls onClick, or the function that its property or value points to. disabled can be a function.

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.setTheme('light') // a mode of theme.css

// this page prints the log under the panel
const log = console.log

Setup, Blueprint

import {UI} from 'uiconfig-blueprint'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))

// this page prints the log under the panel
const log = console.log

buttons.js

const counter = {
    count: 0,
    increment() {
        this.count++
    },
}

const config = {
    type: 'folder',
    label: 'Buttons',
    expanded: true,
    children: [
        // onClick
        {
            type: 'button',
            label: 'Say hello',
            onClick: () => log('hello'),
        },
        // the function that property points to; `this` is the object
        {
            type: 'button',
            label: 'Increment',
            property: [counter, 'increment'],
        },
        // the function in value
        {
            type: 'button',
            label: 'Reset',
            value: () => {
                counter.count = 0
            },
        },
        {
            type: 'button',
            label: 'Only below 5',
            disabled: () => counter.count >= 5,
            onClick: () => log('count is', counter.count),
        },
        {type: 'monitor', label: 'Count', property: [counter, 'count']},
    ],
    // a click is a change too: refresh to show the count
    onChange: () => config.uiRefresh(true),
}

ui.appendChild(config)

Log