Skip to content

Control Components

Button

A humble but effective push button.

Wraps the Tweakpane addButton method.

Usage outside of a <Pane> component will implicitly wrap the button in <Pane position="inline">.

See the <ButtonGrid> and <RadioGrid> components for a convenient way to lay out multiple buttons.

Example

Demo

Count: 0

Code

<script lang="ts">
  import { Button } from 'svelte-tweakpane-ui'

  let count = 0
</script>

<Button on:click={() => count++} label="Count" title="Increment" />
<pre>Count: {count}</pre>

Props

title Section titled “title” optional
Description	Text inside of the button.
Type	`string`
Default	`'Button'`

label Section titled “label” optional
Description	Text displayed next to the button.
Type	`string`
Default	`undefined`

disabled Section titled “disabled” optional
Description	Prevent interactivity and gray out the control.
Type	`boolean`
Default	`false`

theme Section titled “theme” optional
Description	Custom color scheme.
Type	`Theme`
Default	`undefined` Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme set with `setGlobalDefaultTheme()`.)

Events

click Section titled “click”
Description	Fires when the button is clicked.
Type	`ButtonClickEvent`