fix: button label should use settings.label if provided

.changeset/plenty-spies-provide.md

@@ -0,0 +1,5 @@
+---
+"leva": patch
+---
+
+fix: button label should use settings.label if provided

packages/leva/src/components/Button/Button.tsx

@@ -10,10 +10,11 @@ type ButtonProps = {
 
 export function Button({ onClick, settings, label }: ButtonProps) {
   const store = useStoreContext()
+  const displayLabel = settings.label !== undefined ? settings.label : label
   return (
     <Row>
       <StyledButton disabled={settings.disabled} onClick={() => onClick(store.get)}>
-        {label}
+        {displayLabel}
       </StyledButton>
     </Row>
   )

packages/leva/src/components/ValueInput/ValueInput.tsx

@@ -84,7 +84,12 @@ export function ValueInput({
         autoComplete="off"
         spellCheck="false"
         value={value}
-        onChange={update(onChange)}
+        onChange={update((value) => {
+          onChange(value)
+          // Only call onUpdate for non-number inputs; number inputs retain
+          // their original commit behavior (on blur/Enter via dragEnd)
+          if (type !== "number") onUpdate(value)
+        })}
         onFocus={() => emitOnEditStart()}
         onKeyPress={onKeyPress}
         onKeyDown={onKeyDown}

packages/leva/src/hooks/useToggle.ts

@@ -94,35 +94,55 @@ export function useToggle(toggled: boolean) {
   }, [])
 
   useEffect(() => {
-    // prevents first animation
+    const ref = wrapperRef.current!
+    const contentEl = contentRef.current!
+
+    const updateHeight = () => {
+      const { height } = contentEl.getBoundingClientRect()
+      if (ref.style.height !== `${height}px` && height > 0) {
+        ref.style.height = `${height}px`
+      }
+    }
+
+    if (!toggled) {
+      ref.style.height = '0px'
+      ref.style.overflow = 'hidden'
+      return
+    }
+
+    // prevents first animation on initial expand
     if (firstRender.current) {
       firstRender.current = false
+      updateHeight()
       return
     }
 
-    let timeout: number
-    const ref = wrapperRef.current!
-
     const fixHeight = () => {
-      if (toggled) {
-        ref.style.removeProperty('height')
-        ref.style.removeProperty('overflow')
-        contentRef.current!.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-      }
+      ref.style.removeProperty('height')
+      ref.style.removeProperty('overflow')
+      contentEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
     }
 
     ref.addEventListener('transitionend', fixHeight, { once: true })
 
-    const { height } = contentRef.current!.getBoundingClientRect()
-    ref.style.height = height + 'px'
-    if (!toggled) {
-      ref.style.overflow = 'hidden'
-      timeout = window.setTimeout(() => (ref.style.height = '0px'), 50)
+    const { height } = contentEl.getBoundingClientRect()
+    const currentHeight = ref.style.height
+    ref.style.height = `${height}px`
+
+    // If no transition will occur, call fixHeight directly
+    if (currentHeight === `${height}px`) {
+      ref.removeEventListener('transitionend', fixHeight)
+      fixHeight()
     }
 
+    const resizeObserver = new ResizeObserver(() => {
+      updateHeight()
+    })
+    resizeObserver.observe(contentEl)
+
     return () => {
       ref.removeEventListener('transitionend', fixHeight)
-      clearTimeout(timeout)
+      resizeObserver.disconnect()
     }
   }, [toggled])
 

packages/leva/src/plugins/Number/number-plugin.ts

@@ -50,7 +50,7 @@ export const normalize = ({ value, ...settings }: NumberInput) => {
   const pad = Math.round(clamp(Math.log10(1 / padStep), 0, 2))
 
   return {
-    value: suffix ? _value + suffix : _value,
+    value: _value,
     settings: { initialValue: _value, step, pad, min, max, suffix, ..._settings },
   }
 }

packages/leva/src/types/public.ts

@@ -44,7 +44,7 @@ export enum LevaInputs {
   VECTOR2D = 'VECTOR2D',
 }
 
-export type ButtonSettings = { disabled?: boolean }
+export type ButtonSettings = { disabled?: boolean; label?: string }
 
 export type ButtonInput = {
   type: SpecialInputs.BUTTON