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

🔗
ButtonExample.svelte
<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

🔗
optional
Description

Text inside of the button.

Typestring
Default'Button'

label

🔗
optional
Description

Text displayed next to the button.

Typestring
Defaultundefined

disabled

🔗
optional
Description

Prevent interactivity and gray out the control.

Typeboolean
Defaultfalse

theme

🔗
optional
Description

Custom color scheme.

TypeTheme
Defaultundefined
Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().)

Events

🔗

click

🔗
Description

Fires when the button is clicked.

TypeButtonClickEvent